Директива Angular2 на основе динамически добавленного класса css

Question

ДирективаУглового маршрутизатора добавляет класс 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]="..." или добавлены динамические атрибуты или классы.