如何以编程方式实例化和应用指令？答案

【问题标题】：How to instantiate and apply directives programmatically?如何以编程方式实例化和应用指令？
【发布时间】：2017-01-26 13:48:18
【问题描述】：

我知道在 ng2 中我们有 ComponentFactoryResolver 可以解析工厂，我们可以申请 ViewContainerRef。

但是，指令有类似的东西吗？一种实例化它们并将它们应用于组件的投影内容的方法？

【问题讨论】：

【解决方案1】：

不，不能动态添加或删除指令。它们仅适用于静态添加到组件模板的 HTML。

您可以做的是通过向指令传递参数 (@Input()) 来启用/禁用指令以通知它是否执行某项操作。

【讨论】：

那么，如果我有一个 TemplateRef，应该可以使用 jQuery 或其他东西手动修改它，以便在投影时也实例化另一个指令对吗？
我不这么认为。 TemplateRef 永远不会添加到 DOM 中。它仅由 Angular 内部使用，因此不能与 jQuery 一起使用。动态添加一些 HTML，即使它匹配某些指令选择器，仍然不会实例化指令。
所以基本上，在 ng2 中真的没有办法真正制定适用于其他人的指令，对吧？这让我发疯了。我无法将项目视图的现有组件包装到其他组件中。根本不支持？
我不明白“我不能将项目视图的现有组件包装到其他组件中。”。也许您可以编辑您的问题并展示您实际尝试解决的问题。
github上有一个关于这个github.com/angular/angular/issues/8785的未解决问题

【解决方案2】：

这不是不可能的。它只是丑陋且容易出错。要记住的基本事项是指令首先是一个类。如果您可以手动获取构造函数所需的东西，您可以简单地执行以下操作：

const highlight = new HighlightDirective(...);

做好可能会遇到意外行为的准备，因为您将逃脱 Angular 的控制。

Read my full answer here 关于动态添加指令。

【讨论】：