Mat-Button routerLinkActive 替代方案？

Question

我想在单击时更改我的垫子按钮的颜色（里面有垫子图标）。 routerLinkActive="mat-accent" （或其他）不起作用我不知道为什么我希望它应该起作用。你有什么建议吗？这是我在下面尝试的

   <button style="margin-left:auto;"  mat-button [matMenuTriggerFor]="belowMenu"  routerLinkActive="mat-accent">
        <mat-icon>notifications</mat-icon>
        <span *ngIf="isFinishedSize>0" class="badge">{{isFinishedSize}}</span>
        <mat-menu class="myBorder" #belowMenu="matMenu">
            <h4 style="margin-left:17px;">Pending Tasks</h4>
            <ul class="list-group" *ngFor="let not of notifications;">
                <li *ngIf="!not.isFinished" class="list-group-item">{{not.description}}</li>
            </ul>
            <button style="margin-left:5px;" routerLink="/notifications" mat-button><strong>See the
                    Details</strong>
                <mat-icon>arrow_forward_ios</mat-icon>
            </button>
        </mat-menu>
    </button>

Answer 1

单击按钮时，您可以将 class 添加到按钮。 将此添加到 html：

(click)="btnClick('someId')" [class.active-btn]="activeId=='someId'"

将此添加到 your.ts 文件

activeId = '';
btnClick(id: string) {
  this.activeId = id;
}

然后，您可以根据需要使用 css 设置按钮样式

.active-btn {
  color: orange;
  background-color: blue;
} 

最终 html：

 <button style="margin-left:auto;"  mat-button [matMenuTriggerFor]="belowMenu"  routerLinkActive="mat-accent" (click)="btnClick('someId')" [class.active-btn]="activeId=='someId'">
        <mat-icon>notifications</mat-icon>
        <span *ngIf="isFinishedSize>0" class="badge">{{isFinishedSize}}</span>
        <mat-menu class="myBorder" #belowMenu="matMenu">
            <h4 style="margin-left:17px;">Pending Tasks</h4>
            <ul class="list-group" *ngFor="let not of notifications;">
                <li *ngIf="!not.isFinished" class="list-group-item">{{not.description}}</li>
            </ul>
            <button style="margin-left:5px;" routerLink="/notifications" mat-button><strong>See the
                    Details</strong>
                <mat-icon>arrow_forward_ios</mat-icon>
            </button>
        </mat-menu>
    </button>