0

我有一些这样的链接

<li routerLinkActive="active" class="nav-item">
<a [routerLink]="['contracts']" 
[queryParams]="{ activeOnly: false }" 
class="nav-link">Contracts</a>
</li>

您在 params 中看到我有?activeOnly=false使用这种方法，当我的网址像

contract?activeOnly=false 在 html 中添加了 active css 类，用户可以看到它是活动链接

我遇到的问题是，有时 url 可以像这样的 contracts?activeOnly=true&id=1然后活动的css 不再适用。

我需要的是在元素上具有活动的 css 类，即使 url 已随查询参数而更改。

例如，如果 url 是这样的contracts?activeOnly=true&id=1

活动的 css 类也必须留在LI html 标签上

4

2 回答 2

2 
Path: '/' Component: HomeComponent
Path: '/server' Component: ServerComponent
Path: '/about' Component: AboutComponent

家庭服务器 关于

现在如果您导航到服务器，将选择默认主页

家庭 服务器关于

HOME 和 SERVER 都将变为活动状态

为什么？

因为在和localhost:4200/server之间有一条空路径，这将使主页选项卡保持活动状态。localhost:4200server/

因此，为了处理它，您使用[routerLinkActiveOptions]="{exact : true}"选项home卡。现在，如果您导航到server，只会突出显示服务器选项卡

于 2020-06-17T13:38:57.850 回答
1

RouterLinkActive 如果与 queryParams 一起使用，则需要完全匹配，因此上述解决方案将不起作用。有一个提案要提出，routeLinkActiveOptions但被 Angular 团队放弃了。

您可以定义自己的方法来识别活动。

在下面的代码片段中，我定义了一个方法，如果路径 url 减去任何查询参数与从模板传递的 routerlink 路径匹配，则链接活动将返回 true。

import {Router} from '@angular/router';

constructor(private router: Router){

}

isLinkActive(link) {
  const url = this.router.url;
  return link.id === url.substring(1, url.indexOf('?'));
}

class="active"如果方法isLinkActive返回 true ，则从模板分配

<li *ngFor="let link of links" [class.active]="isLinkActive(link)">
  <a [routerLink]="'/'+link.id" [queryParams]="{ activeOnly: false }">{{link.name}}</a>
</li>

堆栈闪电战： https ://stackblitz.com/edit/angular-8f7jk8

于 2019-09-16T12:33:14.463 回答