Angular 9 routerLinkActive 无法正常工作

Question

我的问题是当我点击其他路由器链接时，路由器链接的类

<div class="side-link" [routerLink]="['/']" [routerLinkActive] = "['link-active']">Dashboard</div>

仍然活跃，所以我有 2 个活跃的类链接。

app-routing.module.ts

  {
    path: '',
    component: SidebarComponent, 
    children: [
      {path: '', component: DashboardComponent },
      {path: 'user-list', component: DashboardComponent },
      {path: 'account', component: DashboardComponent },
      {path: 'setting', component: DashboardComponent }
    ]
  }

应用程序组件.html

    <div class="side-link" [routerLink]="['/']" [routerLinkActive] = "['link-active']">Dashboard</div>
    <div class="side-link" [routerLink]="['/user-list']" [routerLinkActive] = "['link-active']">User List</div>
    <div class="side-link" [routerLink]="['/account']" [routerLinkActive] = "['link-active']">Account</div>
    <div class="side-link" [routerLink]="['/setting']" [routerLinkActive] = "['link-active']">Setting</div>

Answer 1

如果您要匹配 URL 与其他路由部分匹配的路由，则需要声明要执行完全匹配。

除非您只有一条路由，否则相对 URL/将始终被视为与其他路由的部分匹配。

您可以使用routerLinkActiveOptions来声明您要执行精确匹配。

<div class="side-link" routerLink="/" routerLinkActive="link-active"
    [routerLinkActiveOptions]="{ exact: true }" >
  Dashboard
</div>

通过部分匹配，我的意思是一个 URL 也是另一个路由的前缀。

例如：/child是 的部分匹配/child/grand-child。

这不受路由是否声明为子级的影响。