동적으로 추가 된 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에 의해 동적으로 추가 될 때 작동하지 않습니다 :

CSS 클래스가 추가되어 있지만

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

, 지시어를 코드가 실행되지 않습니다.

이것은 Angular2의 첫 번째 단계이므로 해결책은 쉽지만 대답을 찾을 수 없습니다.

Answer 1

이것은 지원되지 않습니다. Angular2는 구성 요소 및 지시문을 구성 요소 템플릿에 정적으로 추가 된 HTML과 일치하는 선택기로만 인스턴스화합니다. 동적 인 것은 무시됩니다 (HTML은 [innerHTML]="..."을 사용하여 추가되거나 속성 또는 클래스가 동적으로 추가됨).