css - 如何更改点击时按钮的颜色？

Question

我想使用 Angular 和 CSS 更改点击时的按钮颜色，因为我对此很陌生。

.ts

 import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'title';
}

.html

 <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false"           fxHide.gt-sm="true">
    <div fxLayout="column">
      
        <button mat-button style="text-align:left" routerLink="butn1" >Attend</button>
        <button mat-button style="text-align:left" routerLink="butn2" >Host</button>
       
        <button mat-button style="text-align:left" routerLink="contact" >Contact</button>
        <button mat-button style="text-align:left" routerLink="login" >Login</button>
    </div>
  </mat-sidenav>

Answer 1

您可以将其添加到 html 按钮标签中'<按钮[class.mycolorclass]='hasClicked'(点击)='hasClicked=true'如果您愿意，可以将 click 指令中的逻辑移至 TypeScript 类中的方法中