单击 angular 时更改垫子按钮的颜色

Question

您好我正在开发一个 angular 应用程序。 我想创建选项卡，单击每个调用不同的 function。 我正在使用垫子按钮。 我的代码

<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; }

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

PS：只有当我在 css 中评论背景颜色时，颜色变化才有效。

Answer 1

根据您的要求，首先您需要知道哪个选项卡处于活动状态，然后仅为该选项卡应用颜色，为此您需要有另一个变量currentActiveTab 。 每当用户使用 change 方法单击不同的选项卡时，您都需要更改 currentActiveTab 值，这将通过将选项卡索引作为参数传递给该方法来激活选项卡的颜色。

<div flexLayout="row">
    <button mat-flat-button [color]="this.crrentActiveTab == 1 ? this.paletteColour : null" (click)="change(1)">B2-L1</button>
    <button mat-flat-button [color]="this.crrentActiveTab == 2 ? this.paletteColour : null" (click)="change(2)">B2-L3</button>
    <button mat-flat-button [color]="this.crrentActiveTab == 3 ? this.paletteColour : null" (click)="change(3)">B2-L3</button>
    <button mat-flat-button [color]="this.crrentActiveTab == 4 ? this.paletteColour : null" (click)="change(4)">B2-L4</button>
</div>

在这里，您将在 ts 更改方法中设置 palete

 change(index) {
  this.currentActiveTab = index;
 }

Answer 2

你不能像上面一样在 angular 中应用类（垫子的颜色属性）。它应该像下面这样使用

 <div flexLayout="row">
          <button mat-flat-button [attr.color]="this.selected == 1 ? 'warn' : 'primary'" (click)="change(1)">B2-L1</button>
          <button mat-flat-button [attr.color]="this.selected == 2 ? 'warn' : 'primary'" (click)="change(2)">B2-L3</button>
          <button mat-flat-button [attr.color]="this.selected == 3 ? 'warn' : 'primary'" (click)="change(3)">B2-L3</button>
          <button mat-flat-button [attr.color]="this.selected == 4 ? 'warn' : 'primary'" (click)="change(4)">B2-L4</button>
      </div>

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

Answer 3

您可以将按钮放在它们自己的组件中。 我用一个简单的按钮做了一个快速演示。 我确信它与 angular 材料类似。

一个主要优点是这也分离了功能，而不是制作一个可以完成所有工作的组件 class。

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

@Component({
  selector: 'my-button',
  template: '<button [style.background]="this.color" (click)="toggleColor()">I am button #1</button>'
})
export class MyButtonComponent  {
  color = 'red';

  constructor(){}

  toggleColor(){
    if( this.color === 'red' )
      this.color = 'blue';
    else
      this.color = 'red';
  }
}

玩弄它： https://stackblitz.com/edit/angular-y8zf5a

注意：我个人不会根据按钮单击为按钮着色，而是更改按钮 class 以指示按钮调用的 function 的可用性。 因此，您将拥有反映按钮的 state 的类，如不可用、正在处理、可用、已处理等。 这些类将使用 css 进行样式设置。

Answer 4

使用deep

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

这将覆盖默认样式

Answer 5

我想出了一个办法

.html

<div flexLayout="row">
    <div flexLayout="row">
        <button mat-flat-button [ngClass]="this.selected == 1 ? 'tab_selected' : 'tab_unselected'" (click)="change(1)">B2-L1</button>
        <button mat-flat-button [ngClass]="this.selected == 2 ? 'tab_selected' : 'tab_unselected'" (click)="change(2)">B2-L3</button>
        <button mat-flat-button [ngClass]="this.selected == 3 ? 'tab_selected' : 'tab_unselected'" (click)="change(3)">B2-L3</button>
        <button mat-flat-button [ngClass]="this.selected == 4 ? 'tab_selected' : 'tab_unselected'" (click)="change(4)">B2-L4</button>
    </div>
</div>

.ts

selected
change(n) {
  this.paletteColour = 'warn';
  this.selected=n;
  console.log(this.selected);
}

.css

   .tab_selected {
    background-color: grey; 
    border-radius: 0 px !important;;  
}

 .mat-button {
  border-radius: 0 px !important;;     
} 

谢谢大家的支持。

Answer 6

由于您提到您专门使用导航，因此我为您提供了另一种解决方案； 当路由处于活动状态时，您可以使 angular 添加名为active的 class 。 这是通过routerLinkActive="active"实现的。

Stackblitz： 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;
}

Answer 7

• Ver 简单的解决方案如下所示：-

• 只需使用routeLinkActive='active'并在名为 active 的组件 css 中设置 class。

   <button mat-raised-button color="primary" *appHasRole="'admin'" routerLink="/admin" routerLinkActive="active" [routerLinkActiveOptions]={exact:true} >Home </button>