Angular2指令基於動態添加CSS類

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]="..."或屬性或類別添加。