routerLinkActive用于多个路由

Question

我想将'active'类应用于我的标题导航栏。它与标准[routerLinkActive]配合良好，但是存在一个问题。一些<li>元素有两种情况使其处于活动状态。

我有[/something/inboxes]和[/something/details/:Id]，并且我希望something标签对这两条路线都有效

这是我的代码：

  <li [routerLinkActive]="['active']">
    <a [routerLink]="['/something/inboxes']">something</a>
  </li>

请注意，收件箱和详细信息是完全不同的组成部分。

我的问题是，有没有比使用[ngClass]

更简便的方法了？

Answer 1

我认为这个答案可能会有所帮助：Angular4 - Is routerLinkActive only works on the same html tag?

Answer 2

我有类似的问题。我希望所有子路径的链接均处于活动状态。我这样解决了： HTML：

<a class="{YOUR CLASS}" routerLink="/{my link}/test" [class.selected]="isActive('{my link}')"><a>

如果您有其他用于激活链接的类，请使用[class.my-active-link-class]

TS：

 public isActive(url): boolean {
      return this.router.url.includes(url);
    } 

您可以扩展isActive方法以接受网址数组。