Question

因此，当我单击带有材料图标的按钮时，需要更改其颜色。我尝试过这样的事情：

HTML：

  <button (click)="activeSkill($event)" color="primary" mat-mini-fab>
    <mat-icon aria-label="" name='skill1'>euro_symbol</mat-icon>
  </button>

TS：

activeSkill(event){
    event.target.setAttribute('color', 'accent');
}

但这不起作用。哪个更容易做到这一点？实际上，如果可能的话，我将如何不使用默认的原色和强调色，而是使用一组颜色。

Answer 1

您可以使用变量，并使用该变量来配置颜色值按钮

下面是一个例子

在html中，

<button (click)="selectedColor = 'accent'" [color]="selectedColor" mat-mini-fab>
    <mat-icon aria-label="" name='skill1'>euro_symbol</mat-icon>
 </button>

在.ts

中

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

@Component({
  selector: 'button-overview-example',
  templateUrl: 'button-overview-example.html',
  styleUrls: ['button-overview-example.css'],
})
export class ButtonOverviewExample {

  selectedColor: string = 'primary';

}

Answer 2

您还可以执行以下操作。向按钮标签添加引用#button。

<button (click)="activeSkill()" color="primary" mat-mini-fab #button>
  <mat-icon aria-label="" name='skill1'>add</mat-icon>
</button>

在您的组件中使用ViewChild装饰器

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('button') button: ElementRef;

  activeSkill() {
    (<any>this.button).color = 'accent';
  }
}

请参阅此StackBlitz。

Answer 3

您可以将局部变量作为参考传递。然后像这样设置样式-

activeSkill(event, ele) {
    console.log(event, ele);
    ele['_elementRef']['nativeElement']['className'] = 'mat-raised-button mat-accent';
  }

<button #btn (click)="activeSkill($event, btn)" md-raised-button color="primary">Primary</button>

Working example

只需单击一下即可更改带有Mat-icon的按钮的颜色

3 个答案: