on routerLinkActive =“ active”更改按钮内子mat-icon的颜色

Question

我的网页上有一个带有项目列表的标题，每个项目中都有一个mat-icon子级。以下是其中一项。

<a [routerLink]="[ '/admin' ]" > 
   <button routerLink="['/admin']" routerLinkActive="active">
       <mat-icon color="warn">history</mat-icon>Audit
   </button>
</a>

routerLinkActive="active"上的CSS在按钮文本上工作正常，但我也想更改mat-icon的颜色，但似乎无济于事

Answer 1

最简单的方法是在CSS中添加它-最好的方法是在全局中添加它：

.active .mat-icon{
   color: inherit;
}

Answer 2

RouterLinkActive将变量导出到模板，并具有一个告诉您当前处于活动状态的属性。

https://angular.io/api/router/RouterLinkActive#properties

https://github.com/angular/angular/blob/ead169a4022e2a2f5520e1c1a58f30692b90f7cd/packages/router/src/directives/router_link_active.ts#L77

   <button routerLink="['/admin']" routerLinkActive="active" #rla="routerLinkActive">
      <mat-icon [color]="rla.isActive && 'warn'">history</mat-icon>Audit
  </button>

如果warn的属性isActive为true，则上述将颜色设置为routerLinkActive。

Answer 3

看着这个answer，你可以做这样的事情

<a [routerLink]="[ '/admin' ]" > 
   <button routerLink="['/admin']" routerLinkActive="active" #rla="routerLinkActive">
       <mat-icon [ngClass]="{'color': rla.isActive ? 'warn' : 'primary'}">history</mat-icon>Audit
   </button>
</a>

或此

<a [routerLink]="[ '/admin' ]" > 
   <button routerLink="['/admin']" routerLinkActive="active" #rla="routerLinkActive">
       <mat-icon [ngStyle]="{'color': rla.isActive ? 'warn' : 'primary'}">history</mat-icon>Audit
   </button>
</a>

请注意，这些答案未经测试