角路由器LinkActiveOptions答案

【问题标题】：Angular routerLinkActiveOptions角路由器LinkActiveOptions
【发布时间】：2019-09-16 11:10:28
【问题描述】：

我有这样的链接

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

您在参数中看到这里我有 ?activeOnly=false 使用这种方法，当我的网址像这样时，一切都可以

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

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

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

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

active css 类也必须保留在 LI html 标签上

【问题讨论】：

您希望在哪里应用活动 css routerLinkActive="active" 确保链接具有活动 css 类
是的，当 url 有 ?activeOnly=false 时应用，但是当我在同一条路线上并且只是参数更改时，它会丢失 css 类？
你有最小的演示吗？
我无法将它添加到 stackbiz，因为这是 url 活动的问题？
我在这里为您创建了一个。你现在能告诉我stackblitz.com/edit/angular-8f7jk8 是什么问题吗？我尝试使用 url angular-8f7jk8.stackblitz.io/2?activeOnly=false 并且效果很好

标签： angular angular-router routerlinkactive

【解决方案1】：

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

首页服务器简介

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

首页 服务器 关于

HOME 和 SERVER 都将变为活动状态

为什么？

因为在localhost:4200/server 中localhost:4200 和server 之间有一条空路径，即/，它将保持主页选项卡也处于活动状态。

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

【讨论】：

我发现当我使用新选项时它起作用了：[routerLinkActiveOptions]="{ matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact' } "

【解决方案2】：

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

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

在下面的 sn-p 中，我定义了一个方法，如果路径 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('?'));
}

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

<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

【讨论】：