角路由路由器LinkActive答案

【问题标题】：Angular Routing routerLinkActive角路由路由器LinkActive
【发布时间】：2019-02-04 19:00:38
【问题描述】：

由于某种原因，当我转到 heros/2 链接时，两个链接都从 routerLinkActive 获取 .active 类，但我希望只有 c2.component 应该得到它。我的错误是什么？

附：如果我去英雄链接=只有这个链接被激活。

    const appRoutes: Routes = [
            { path: 'heros', component: c1},
            { path: 'heros/:id', component: c2},
        ];

  <a routerLink="/heros" routerLinkActive="active">heros</a>
  <a routerLink="/heros/2" routerLinkActive="active">hero 2</a>

【问题讨论】：

标签： angular angular-routing angular-router

【解决方案1】：

您需要将exact 参数设置为true，以便仅将类设置为精确数学：

<a 
  routerLink="/heros" 
  routerLinkActive="active" 
  [routerLinkActiveOptions]="{exact: true}"
> heros </a>

【讨论】：

【解决方案2】：

您可以通过传递exact: true 来配置RouterLinkActive。只有当 url 与链接完全匹配时，这才会添加类。

<a routerLink="/heros" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">heros</a>
<a routerLink="/heros/2" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">hero 2</a>

【讨论】：