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

Question

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

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

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

Answer 3

看看这个答案，你可以做这样的事情

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

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

Answer 4

<li>
            <a routerLink="/Clients" routerLinkActive="active">
                <span class="menu_icon"><i class="material-icons">group</i></span>
                <span class="menu_title">Clients</span>
            </a>
        </li>

> add this sytle in global css


.active i {
        color: #28A745;
    }
    .active span {
        color: #28A745;
    }