angular - [ngClass] でカスタム属性ディレクティブを使用するには?

Question

カスタム属性ディレクティブを定義しました:

import { Directive, ElementRef } from '@angular/core';
@Directive({
  selector: '.vvdirective'
})
export class VVdirectiveDirective {

  constructor(private elRef: ElementRef) {}
  ngOnInit() {
        this.elRef.nativeElement.style.backgroundColor = "gray";
        this.elRef.nativeElement.style.color = "navy";
        console.log("vv directive works!!")
  }
}

'vvdirective' CSS クラスを共有する要素を灰色の背景とネイビーのフォント色に変更します。また、コンソール メッセージも出力します。

これは、従来のユースケースで機能します。

<div class="vvdirective">My custom attribute directive works in a plain old fashion way !</div>

写真：

しかし

コンポーネント内でこのディレクティブを使用する場合:

HTML:

<div [ngClass]="klass" >My custom attribute directive works even embedded in a component</div>

&TS:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-vvdiv',
  templateUrl: './vvdiv.component.html',
  styleUrls: ['./vvdiv.component.scss']
})
export class VvdivComponent implements OnInit {

  @Input() klass: string;

  constructor() { }

  ngOnInit() {
 }

}

& APP TS を呼び出す:

<app-vvdiv klass="vvdirective"></app-vvdiv>

機能しません (背景/フォントの色は変化せず、コンソール メッセージも表示されません):

写真：

次のようになります。

写真：

そして、私が驚いたのは、最終的に両方のコード サンプル (旧式のディレクティブ呼び出しを含むものと、コンポーネントを介した呼び出しを含むもの) が CSS クラスを持っていることです。

ただし、最初の (コンポーネントに埋め込まれていない) のみが、ディレクティブの変更によって影響を受けます。

後者の場合、コンポーネントで使用される ngClass ディレクティブの動作が異なるようです。

アプリのライフサイクルに関係しているのかもしれませんが、わかりません。

したがって、ngClass と私のカスタム ディレクティブの両方を使用してコンポーネントを作成する方法を知っている場合は、あなたの回答に細心の注意を払います!

HERE THE PLUNKER: プランカー

こちらの GITHUB リポジトリ: git repo

一番、