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

【问题标题】：On routerLinkActive="active" change the color of child mat-icon inside button在 routerLinkActive="active" 上更改按钮内子垫图标的颜色
【发布时间】：2020-04-03 18:23:40
【问题描述】：

我的网页上有一个带有项目列表的标题，每个项目都有一个 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 的颜色，但似乎没有任何效果

【问题讨论】：

尝试以下方法：[color]="condition ? 'primary' : 'warn'"

标签： html css angular angular-material angular-ui-router

【解决方案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>

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

【讨论】：

【解决方案2】：

最简单的方法是在你的 CSS 中添加它——可能最好是全局添加它：

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

【讨论】：

谢谢，如果您认为是最佳答案，请务必选择它。

【解决方案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>

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

【讨论】：

颜色应该动态变化吗？
@al.koval 假设 active 是一个布尔值，这应该动态改变
active 是不是模板变量。它是分配给按钮的class 属性的字符串。
@Reactgular 感谢您的清晰说明，我以前没有使用过主动路由器。使用这个link我更新了我的答案

【解决方案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;
    }

【讨论】：