Angular如何根据routerLinkActive状态修改mat-icon的颜色

解决方案 #

你只需要给mat-icon的color属性做状态绑定即可，同时可补充路由精确匹配配置避免激活状态判断异常，修改后的代码如下：

<mat-nav-list>
        <a  *ngFor="let option of options"
            [routerLink]="[option.route]"
            mat-list-item 
            routerLinkActive 
            #routerLink="routerLinkActive"
            [routerLinkActiveOptions]="{exact: true}">
            <mat-icon matListIcon 
                [ngClass]="{'material-icons-outlined': !routerLink.isActive}"
                [color]="routerLink.isActive ? 'primary' : ''">
                {{option.icon}}
            </mat-icon>
        </a>
</mat-nav-list>

其他可选实现（自定义非主题色） #

如果你需要用不在Material主题中的自定义颜色，可以通过ngClass搭配自定义CSS实现：

1. 先在组件样式中添加自定义图标样式：

/* 未激活状态图标样式 */
.nav-icon-inactive {
  color: #757575;
}
/* 激活状态图标样式 */
.nav-icon-active {
  color: #1976d2;
}

2. 修改mat-icon的ngClass配置：

<mat-icon matListIcon 
    [ngClass]="{
      'material-icons-outlined': !routerLink.isActive,
      'nav-icon-inactive': !routerLink.isActive,
      'nav-icon-active': routerLink.isActive
    }">
    {{option.icon}}
</mat-icon>

注意事项 #

如果出现激活状态判断错误（比如多个路由同时被判定为激活），确认是否添加了[routerLinkActiveOptions]="{exact: true}"开启路由精确匹配即可解决。

内容的提问来源于stack exchange，提问作者Andres Hernandez