【发布时间】：2018-08-16 06:13:01
【问题描述】：
我正在尝试在 Angular 6 中向 routerLink 添加活动类。我的 sidnav 组件由所有 routerLinks 组成。单击 routerlink 后，特定链接应该处于活动状态并且应该出现特定组件。我尝试使用焦点 css，当我单击链接 2 次时它正在工作。可能是我收到错误，因为我在 bill-to 中使用 sidenav 选择器组件。
sidenav组件html代码：
<li ><a [ngClass]="{'red-input':clicked}" routerLink="/bill-to" routerLinkActive="red-input" (click)="Clicked()" >Bill To</a></li>
<li ><a [ngClass]="{'red-input':clicked}" routerLink="/ship-to" routerLinkActive="red-input" (click)="Clicked()"> Ship To</a></li>
ts 代码：
clicked: boolean = false;
Clicked() {
this.clicked = true;
}
Bill-to 组件代码：
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<app-sidenav></app-sidenav>
</div>
<div class="col-sm-8" style="margin-top:1%;">
</div>
</div>
</div>
【问题讨论】：
-
这就是 routerLinkActive 自己做的。删除 [ngClass] 和 (click) 处理程序：它们没用。
-
我删除了，还是不行
-
准确定义“不工作”。当然，如果您遇到错误，请发布它。为什么你在 bill-to 组件中有一个 sidenav？这没有道理。 sidenav 允许显示它，因此它已经显示在该组件之外。
-
不工作：在链接上点击 2 次后工作。
-
不工作：在链接上单击 2 次后工作。我在帐单组件中使用 sidenav，因为，我在这个项目中第二次使用 sidenav（父组件）。不考虑这个 sidenav在 routeroutlet 内部，因此我在 bill-to 组件中使用了 sidenav
标签： angular