javascript - 单击 Angular 时更改垫子按钮的颜色

Question

您好，我正在开发一个 Angular 应用程序。我想创建选项卡，点击每个选项卡调用不同的功能。我正在为此使用垫子按钮。我的代码

<div flexLayout="row">
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L1</button>
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L3</button>
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L3</button>
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L4</button>

</div>

.ts文件

 paletteColour
  change() {
  this.paletteColour = 'warn';
  }

.css 文件

.mat-flat-button {
    background-color: grey;
    border-radius: 0 px !important;;  
}

.mat-button, .mat-flat-button, .mat-icon-button, .mat-stroked-button { border-radius: 0px; }

但这会在单击一个按钮时更改所有按钮的颜色。如何仅更改一个已单击的按钮的颜色，其余的都保持相同的颜色。

PS:只有当我在 css 中评论 background-colour 时，颜色更改才有效。

Answer 1

既然你提到你专门使用导航，我有另一个解决方案给你；当路由处于事件状态时，您可以使 Angular 添加一个名为 active 的类。这是通过 routerLinkActive="active" 实现的。

堆栈 Blitz :https://stackblitz.com/edit/angular-ijn9bz

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HomeComponent } from './home/home.component';
import { Page2Component } from './page2/page2.component';
import { Page3Component } from './page3/page3.component';

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: 'page2', component: Page2Component },
      { path: 'page3', component: Page3Component }
    ])
  ],
  declarations: [ AppComponent, HelloComponent, HomeComponent, Page2Component, Page3Component ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.html

<div flexLayout="row">
    <button [routerLink]="['/home']" routerLinkActive="active">B2-L1</button>
    <button [routerLink]="['/page2']" routerLinkActive="active">B2-L3</button>
    <button [routerLink]="['/page3']" routerLinkActive="active">B2-L3</button>
</div>

<router-outlet></router-outlet>

app.component.css

.active{
  background: yellow;
}