Angular 6-页面刷新后，RouterLinkActive不起作用

Question

上下文

我有一些菜单。在路由器中选择的项目上面带有类别selected，以更改其颜色。

  

问题

     

切换路线时一切正常，但是刷新页面时未选择任何内容。

---

代码

我的HTML模板如下：

<div [routerLink]="'link1'" routerLinkActive #link1="routerLinkActive">
    <div [class.selected]="link1.isActive">Link1</div>
</div>
<div [routerLink]="'link2'" routerLinkActive #link2="routerLinkActive">
    <div [class.selected]="link2.isActive">Link2</div>
</div>
...

Answer 1

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

在这里， change_detection_hack 键将在ID更改时更改（即，在导航完成且模板已协调之后），这将导致输入更改，这将导致this.update。 （）方法运行。并且，此时QueryList应该处于正确的状态。

Answer 2

我认为您需要将所选的类名称绑定到routerLinkActive。 并且链接缺少“ /” 这样的事情应该起作用：

a.selected {
  color: red;
}


/* or */

a.selected>span {
  color: red;
}

<a routerLink="link1" routerLinkActive="selected">
  <span>link 1</span>
</a>

此外，如果需要，您可以使用CSS选择器。

希望我能帮助：）