アングル材質デザインディレクティブで色を変更

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



} 

何のサービスが行うことは、それはそれらを呼び出すための唯一の方法は、通過されるように、プライベート変数を割り当て、通常のアプリモジュール、セットアップモジュールからの入力を取ることですゲッター。

はHERESに指令：

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

残念ながら、それは完全に問題を解決しませんでしたが、それはエラーというエラーを通じてやっ詳細