Question

我试图在Angular 6中将活动类添加到routerLink中。我的sidnav组件包括所有routerLinks。单击routerlink后，该特定链接应处于活动状态，并且应显示该特定组件。我尝试使用焦点CSS，当我单击Link 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;
 }

结算组件代码：

   <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>

Answer 1

您应该使用[routerLinkActive]="'your-class-name'"。它将检测路由是否处于活动状态并自行应用类。

演示 https://stackblitz.com/edit/angular-gyhshq

使用类绑定激活Angular中的routerLink

1 个答案: