routerLinkActive 不更新超链接，当 route.params id 更改时答案

【问题标题】：routerLinkActive does not update Hyperlink, when route.params id is changedrouterLinkActive 不更新超链接，当 route.params id 更改时
【发布时间】：2017-01-17 22:17:04
【问题描述】：

那是我的笨蛋：

https://plnkr.co/edit/C9W0pHvy27J83m25YUOJ?p=preview

这些是追溯问题的步骤：

打开项目“永无止境”
网址显示/projects/1/tests然后
“测试链接”以橙色突出显示
将url栏中的路由改为/projects/2/tests
以前突出显示的“测试链接”现在不再是橙色。

为什么活动类被angular去掉了？

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

目前这不起作用，请参阅#13865

【讨论】：

如果我们继续那场比赛，你最后欠我的，你的全部 5000K 分数：P

【解决方案2】：

我遇到了这个问题。实际上，我的路由需要从projects/1/test 更改为projects/2/test，其中 1 和 2 是 url 中可能会更改的参数。所以我通过以下技术解决了它：

<a routerLink="/projects/:id/test" routerLinkActive="on" 
   [routerLinkActiveOptions]="{ exact: false, __change_detection_hack__: id }">
   Link 
</a>

__change_detection_hack__ 检测 url 的变化，id 是您的 url 参数名称。

注意：如果你用一些变量设置routerLink，那么你应该这样做：

<a [routerLink]="myStringVar" routerLinkActive="on" 
   [routerLinkActiveOptions]="{ exact: false, __change_detection_hack__: someVariable }">
   Link
</a>

详细讨论请访问here

【讨论】：

【解决方案3】：

***app.module.ts***    


  { path: 'projects', component: ProjectListComponent , children: [
    { path: '', redirectTo: 'tests', pathMatch: 'full' }, /* projects/id causes can not match any route */
    { path: ':id/tests', component: TestsListComponent },
    ]
  },

  { path: '', redirectTo: 'projects', pathMatch: 'full' },
   { path: '**', component: NoRouteFoundComponent } /

];

projects-list.component.html

 <nav style="background:gray;">
      <select (ngModelChange)="onChangeProject($event)" [(ngModel)]="currentProject">
                <option *ngFor="let p of projects" [ngValue]="p">
                    {{p.name}}
                </option>
            </select> 
            <button [disabled]="!currentProject"  (click)="open()">Open project</button>


            <a *ngIf="isMenuVisible" [routerLink]="['/projects', currentProject.id, 'tests']"
    [routerLinkActiveOptions]="{ exact: true, __change_detection_hack__: currentProject.id }" >Tests link
            </a>


        <span>Logged out</span>

您应该添加： [routerLinkActiveOptions]="{ 精确：true, change_detection_hack: currentProject.id }"

【讨论】：

嗨，欢迎来到 SO。请解释您的答案（如果可能，请举例说明）。这可以帮助有类似问题的其他人使用您的答案。
希望有帮助