Angular 2 : Add directive to dynamically created component(s)

Question

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

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”指令添加到新的动态创建的组件中？

Answer 1

一个指令首先是一个类。

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

const highlight = new HighlightDirective(...);

❗ Note that this is not standard Angular code. It is almost always preferable to let Angular do the work for you as you might accidentally escape its pipes and go rogue. If that happens, you might run into unexpected Angular behaviors as Angular doesn't know about what you're doing...

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