多个路由的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方法以接受urls数组。