那是我的plunkr:
https://plnkr.co/edit/C9W0pHvy27J83m25YUOJ?p=preview
以下是回溯问题的步骤:
- 打开项目"永无止境"
- 网址显示
/projects/1/tests
然后 - "测试链接"以橙色突出显示 将
- URL 栏中的路由更改为
/projects/2/tests
- 以前突出显示的"测试链接"现在不再是橙色。
为什么活动类被角度删除?
目前这不起作用,请参阅 #13865
我遇到了这个问题。实际上我的路由需要从 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>
详细讨论,请访问此处
***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]="{ exact: true, change_detection_hack: currentProject.id }"