Question

我想在单击时更改其按钮的颜色（内部有mat-icon）。filler(document.createElement('ul'), ['a', 'b', 'c']);（或其他任何方法）不起作用，我不知道为什么我期望它能起作用。有什么建议吗？这是我在下面尝试过的

routerLinkActive="mat-accent"

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>

Mat-Button routerLinkActive替代方案？

1 个答案: