在 routerLinkActive="active" 上更改 child mat-icon 内部按钮的颜色

Question

我的网页上有一个 header，里面有一个项目列表，每个项目都有一个 mat-icon child。以下是其中一项。

<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

看看这个 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>

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

Answer 2

最简单的方法是将其添加到您的 CSS - 可能最好是全局添加它：

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

Answer 3

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。 =17=]

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

在 routerLinkActive="active" 上更改 child mat-icon 内部按钮的颜色

On routerLinkActive="active" change the color of child mat-icon inside button

html

css

angular

angular-material

angular-ui-router