Angular 4: <router-outlet> 中的自定义属性指令未被执行

Angular 4: Custom Attribute Directive within <router-outlet> not being executed

我目前正在尝试使用基于组件的路由为我的 Angular 4 (v 4.2.6) 应用程序创建自定义属性指令。我已经按照 official Angular guide 如何创建这样的属性指令进行了操作。

myHighlight 指令放在根组件上时,一切正常。不幸的是,当在 router-outlet.

中插入的组件中与 @angular/router 结合使用时,它不起作用(属性指令未执行)

为了从我的应用程序中找出问题,我有 created a Plunkr showing the issue

在这个 Plunkr 上,您可以看到一个名为 myHighlight (highlight.directive.ts) 的自定义属性指令。该指令用于根组件 (app.ts)。

然后我添加了两个与路由器一起用于基于组件路由的组件:OneComponent (one.component.ts) 和 TwoComponent (two.component.ts) 绑定到 /one分别为/two。在这两个组件中,还使用了 myHighlight 指令,但遗憾的是没有正确呈现/执行,并且只显示它绑定到的 HTML 元素 (p) 的文本。

如果有人能指出我做错了什么或需要更改什么,我将不胜感激。

AppModule 中的

declarations: [] 仅适用于 ComponentsModule 中的组件。如果您想在不同的模块中重复使用组件或指令,请创建一个功能模块并将此功能模块添加到您要使用它们的每个模块的 imports: []