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

Posted 2023-02-22

【中文标题】Angular 4：未执行 <router-outlet> 中的自定义属性指令

【英文标题】：Angular 4: Custom Attribute Directive within <router-outlet> not being executed

【发布时间】：2017-12-15 14:57:19

【问题描述】：

我目前正在尝试使用基于组件的路由为我的 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) 的文本。

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

【问题讨论】：

我删除了 ComponentsModule，并合并了组件的声明和 highlight 指令，它适用于我。

【参考方案1】：

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

【讨论】：

嗨，Gunter Zochbauer，你能帮我解决这个问题吗，***.com/questions/45005949/…

我昨天问过了，没人回答！

感谢君特！你说的对。当我添加另一个模块DirectivesModule 并将HighlightDirective 添加到它的imports: [] 时，它可以工作。 Plunkr for reference。我想让我感到困惑的是，Angular 没有报告它没有找到属性指令，就像它在模板中使用缺少的组件时所做的那样。 Plunkr for reference

我不知道那些东西。我自己没有使用 TS Angular（仅在 Plunker 中获得 SO 答案）。