垫-按钮routerLinkActive替代？

Question

我想改变我的垫按钮的颜色时，点击(里面有垫图标)。routerLinkActive="mat-accent"(或其他什么)不工作，我不知道为什么我认为work.Do应该有任何建议?这里我尝试了下面。

   <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

单击按钮时，可以向按钮添加类。将其添加到html中：

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

将此添加到.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>