Angular 9 routerLinkActive 无法正常工作答案

【问题标题】：Angular 9 routerLinkActive not working properlyAngular 9 routerLinkActive 无法正常工作
【发布时间】：2020-03-16 07:54:51
【问题描述】：

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

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

【问题讨论】：

标签： angular

【解决方案1】：

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

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

您可以使用routerLinkActiveOptions 声明您要执行完全匹配。

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

部分匹配是指一个 URL 也是另一个路由的前缀。

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

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

【讨论】：