routerLinkActive用于多个路由

Question

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

我有[/something/inboxes]和[/something/details/:Id] ，我希望对这两条路线使用“ something选项卡

这是我的代码：

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

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

我的问题是，有没有比[ngClass]更好，更轻松的方法

Answer 1

我认为此答案可能会有所帮助： Angular4-routerLinkActive是否仅适用于相同的html标签？

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方法以接受网址数组。