角度材料设计随指令改变颜色

Question

我一直在尝试更改材料设计组件的颜色，但当我将指令放在组件上但没有任何更改时，我将它放在 html 元素上，那里也没有发生任何事情。

这里是服务：

import { Injectable, Inject, Optional } from '@angular/core';
import { ColorInterface } from "../core/color.interface"

@Injectable()
export class ColorService {
  // Colors
  private primary: string = "#212121";
  private primaryDark: string = "#000000";
  private primaryLight: string = "#484848";
  private accent: string = "#9e9e9e";
  private accentDark: string = "#707070";
  private accentLight: string = "#cfcfcf";
  private warn: string = "#ffc107";
  private success: string = "#4caf50";
  private danger: string = "#f44336";

  // Set Colors On Load
  constructor(@Optional() @Inject('color') colors: ColorInterface) {
    if(colors) {
      this.primary = colors.primary;
      this.primaryDark = colors.primaryDark;
      this.primaryLight = colors.primaryLight;
      this.accent = colors.accent;
      this.accentDark = colors.accentDark;
      this.accentLight = colors.accentLight;
      this.warn = colors.warn;
      this.success = colors.success;
      this.danger = colors.danger;
    }
  }

  ////  Get Colors  ////

  public get primaryColor(): string {
    return this.primary;
  }
  public get primaryDarkColor(): string {
    return this.primaryDark;
  }
  public get primaryLightColor(): string {
    return this.primaryLight;
  }
  public get accentColor(): string {
    return this.accent;
  }
  public get accentDarkColor(): string {
    return this.accentDark;
  }
  public get accentLightColor(): string {
    return this.accentLight;
  }
  public get successColor(): string {
    return this.success;
  }
  public get warnColor(): string {
    return this.warn;
  }
  public get dangerColor(): string {
    return this.danger;
  }



}

服务所做的是从设置模块（通常是应用模块）获取输入，然后分配私有变量，因此调用它们的唯一方法是通过 getter。

指令如下：

import { Directive, Input, ElementRef, Renderer} from '@angular/core';
import { ColorService } from "../services/color.service";

@Directive({
  selector: '[quiColor]'
})
export class ColorDirective {
  @Input() quicolor: string;

  constructor(
    private element: ElementRef,
    private render: Renderer,
    private color: ColorService)
  {
    if (this.quicolor == "primary")
  this.element.nativeElement.style.backgroundColor = color.primaryColor;
    if (this.quicolor == "darkprimary")
this.element.nativeElement.style.backgroundColor = color.primaryDarkColor;
    if (this.quicolor == "lightprimary")
this.element.nativeElement.style.backgroundColor= color.primaryLightColor;
    if (this.quicolor == "accent")
this.element.nativeElement.style.backgroundColor = color.accentColor;
    if (this.quicolor == "darkaccent")
this.element.nativeElement.style.backgroundColor = color.accentDarkColor;
    if (this.quicolor == "lightaccent")
this.element.nativeElement.style.backgroundColor = color.accentLightColor;
    if (this.quicolor == "warn")
this.element.nativeElement.style.backgroundColor = color.warnColor;
    if (this.quicolor == "success")
this.element.nativeElement.style.backgroundColor = color.successColor;
    if (this.quicolor == "danger")
this.element.nativeElement.style.backgroundColor = color.dangerColor;
  }

}

组件如下：

<mat-toolbar [quicolor]="'primary'">hello</mat-toolbar>
<p [quicolor]="'primary'">Test 2</p>

任何帮助将不胜感激。

Answer 1

试试这个代码

<mat-toolbar quicolor [quicolor]="'primary'">hello</mat-toolbar>
<p quicolor [quicolor]="'primary'">Test 2</p>

查看颜色指令示例here了解更多详情