基于动态添加的css类的Angular2指令[重复]答案

【问题标题】：Angular2 directive based on dynamically added css class [duplicate]基于动态添加的css类的Angular2指令[重复]
【发布时间】：2016-10-28 01:53:46
【问题描述】：

Angular 路由器的 [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>

但routerLink动态添加css类时不起作用：

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

虽然添加了 CSS 类，但不会触发指令代码。

这些是我使用 Angular2 的第一步，所以也许解决方案很简单，但我找不到答案。

【问题讨论】：

标签： javascript typescript angular angular2-directives

【解决方案1】：

不支持。 Angular2 仅将组件和指令实例化为匹配静态添加到组件模板的 HTML 的选择器。任何动态都会被忽略（使用 [innerHTML]="..." 添加的 HTML 或动态添加的属性或类。

【讨论】：