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 }
    ]
  }

app.component.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的部分匹配。

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