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

Posted 2023-02-22

【中文标题】Angular 2：向动态创建的组件添加指令

【英文标题】：Angular 2: Add directive to dynamically created component(s)

【发布时间】：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?

【参考方案1】：

指令首先是一个类。

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

const highlight = new HighlightDirective(...);

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

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