¿如何根据 routerLinkActive 状态 Angular 更改 mat-icon 颜色？

Question

我有一个名为“nav-menu”的组件，在这里我们可以看到 mat-list 导航的每个选项。我想在 routerLink 处于活动状态时更改 mat-icon 颜色。我尝试使用 ngIf 和 ngClass 但没有用。

这是代码：

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

Answer 1

解决方案是使用三元运算并验证 routerLink 状态。

代码如下：

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

¿如何根据 routerLinkActive 状态 Angular 更改 mat-icon 颜色？

¿How to change mat-icon color based on routerLinkActive state Angular?

angular

angular12