マットカードにスタイル/アトリビュートディレクティブをAngular 2/4/5で追加することは可能ですか？

Question

Angular 2、Angular 4、Angular 5（同じ問題が続く場合があります）。

マットカードディレクティブにカスタムディレクティブを追加すると、カードのスタイルが正しく動作しなくなります。

方法はありますか？

Answer 1

質問の回避方法が見つかりました。

• Using an Angular Directive to Add Class to Host Element
• 以下のコード（カスタムディレクティブの内部）を参照してくださいを参照して、クラス（複数可）を追加/削除するディレクティブ
• 使用renderer2を作成し、States.okを言い訳は、など」に相当します何Angulaがない

protected _state = States.ok; 
 

 
    @Input('state') 
 
    public set state(value: string) { 
 
     console.log('CARD STATE: ', value); 
 
     switch (value) { 
 
      case States.ok: 
 
      case States.warn: 
 
      case States.danger: 
 
       // this.elementClass = 'app-dashboard-card-' + value; 
 
       this.setClass(value); 
 
       break; 
 
      default: 
 
       throw new Error('DashboardItemComponent: state not recognised'); 
 
     } 
 
     this._state = value; 
 
    } 
 

 
    constructor(private renderer: Renderer2, private hostElement: ElementRef) { 
 
     renderer.addClass(hostElement.nativeElement, 'custom-theme'); 
 
    } 
 

 
    setClass(state: string) { 
 
     this.renderer.removeClass(this.hostElement.nativeElement, OK_CLASS); 
 
     this.renderer.removeClass(this.hostElement.nativeElement, WARN_CLASS); 
 
     this.renderer.removeClass(this.hostElement.nativeElement, DANGER_CLASS); 
 
     this.renderer.addClass(this.hostElement.nativeElement, 'app-dashboard-card-' + state); 
 
    }