Angular 2：向动态创建的组件添加指令答案

【问题标题】：Angular 2: Add directive to dynamically created component(s)Angular 2：向动态创建的组件添加指令
【发布时间】：2018-08-28 03:12:44
【问题描述】：

我遇到了以下Plunker 来动态添加和删除组件。根据上面的链接和许多其他 SO 帖子，我知道如何访问 Input 和 Output 属性：

this.compRef.instance.someProperty = 'someValue';
this.compRef.instance.someOutput.subscribe(val => doSomething());

而且我还有一个指令“appFont”。

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appFont]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.font = 'Calibri';
    }
}

如何将这个“appFont”指令添加到新的动态创建的组件中？

【问题讨论】：

这能回答你的问题吗？ How to instantiate and apply directives programmatically?

标签： angular angular-directive angular-components

【解决方案1】：

指令首先是一个类。

如果您可以手动获取构造函数所需的东西，您可以简单地执行以下操作：

const highlight = new HighlightDirective(...);

❗ 请注意，这不是标准的 Angular 代码。让 Angular 为您完成工作几乎总是更可取的，因为您可能会不小心逃离它的管道并成为流氓。如果发生这种情况，您可能会遇到意外的 Angular 行为，因为 Angular 不知道您在做什么......

一个 3 岁的问题......我想知道是否有人仍在努力实现这一目标。 ??

【讨论】：