在 routerLinkActive="active" 上更改按钮内子垫图标的颜色

Question

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

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

CSS 在routerLinkActive="active"按钮文本上工作正常，但我也想更改 mat-icon 的颜色，但似乎没有任何效果

Answer 1

将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为routerLinkActivetrue ，上面的代码会将颜色设置为true。