изменить цвет матовой кнопки при нажатии на угловой

Question

Привет, я разрабатываю угловое приложение.Я хочу создавать вкладки, нажав на каждый из которых вызывает разные функции.Я использую матовые кнопки для этого.Мой код

<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 file

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

.css file

.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.

Answer 1

Вы можете поместить кнопки в свои компоненты.Я сделал быстрое демо с простой кнопкой.Я уверен, что он работает аналогично с угловым материалом.

Основным преимуществом является то, что это также отделяет функциональность вместо создания класса компонента, который делает все.

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

Примечание. Лично я не стал бы окрашивать кнопки в зависимости от нажатия кнопки, а изменил класс кнопок, чтобы указать наличие функции, которую вызывает кнопка.Таким образом, у вас будут классы, такие как недоступные, обрабатываемые, доступные, обработанные и т. Д., Которые отражают состояние кнопки.Эти классы будут оформлены с помощью CSS.

Answer 2

Вы не можете применять класс (атрибут цвета mat), как указано выше в 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

Согласно вашему требованию, сначала вам нужно узнать, какая вкладка активна, а затем применить цвет только для этой вкладки, для этой цели вам нужна другая переменная currentActiveTab .Вам нужно изменять значение 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>

Здесь вы будете устанавливатьпалитры внутри метода изменения

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

Answer 4

Поскольку вы упомянули, что специально использовали навигацию, у меня есть для вас другое решение;Вы можете сделать угловой добавить класс с именем active, когда маршрут активен.Это достигается с помощью 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 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

использовать deep

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

это заменит стиль по умолчанию