動的に追加されたcssクラスに基づくAngular2ディレクティブ

Question

角型ルータの[routerLink]ディレクティブは、CSSクラスrouter-link-activeをアクティブリンクに追加します。私はこのクラスに基づいて指令を書いています。

import { Directive, ElementRef} from '@angular/core'; 
@Directive({selector: '.router-link-active'}) 
export class HighlightDirective { 
    constructor(el:ElementRef) { 
     el.nativeElement.style.backgroundColor = 'yellow'; 
    } 
} 

しかし、私は期待どおりに動作しません。

ディレクティブがハードテンプレートでコーディングされている場合、それは動作します：

<a class="router-link-active">Feature1</a> 

が、CSSクラスが routerLinkによって動的に追加されたとき、それは動作しません。

<a [routerLink]="['/feature1']">Feature1</a> 

CSSクラスが追加されているが、ディレクティブコードは実行されません。

これは私のAngular2の最初の手順ですので、解決策は簡単かもしれませんが、答えが見つかりません。

Answer 1

これはサポートされていません。 Angular2は、コンポーネントテンプレートに静的に追加されたHTMLと一致するセレクタにのみ、コンポーネントとディレクティブをインスタンス化します。動的なものはすべて無視されます（HTMLは[innerHTML]="..."を使用して追加されるか、属性またはクラスは動的に追加されます）