Angular Material2 -以编程方式设置颜色

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  primaryColor: ThemePalette = 'primary';
  accentColor: ThemePalette = 'accent';
  warnColor: ThemePalette = 'warn';
}

<button mat-button color="{{ primaryColor }}">Primary</button>
<button mat-button color="{{ accentColor }}">Accent</button>
<button mat-button color="{{ warnColor }}">Warn</button>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  setColor(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'color', color);
  }
}

<button mat-button (click)="setColor('red')">Set Red Color</button>
<button mat-button (click)="setColor('blue')">Set Blue Color</button>