Question

Angular router的[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的第一步，所以也许解决方案很简单，但我找不到答案。

Answer 1

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

Angular2指令基于动态添加的css类

1 个答案: