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

这应该可以完成工作。您可以从@Input()获取一些HTML元素，也可以仅通过getElement(s)By..来定位您的元素。然后将属性添加到组件。

@Component({
  selector: 'my-app',
  template: `<h1 id="header">{{title}}</h1>`
})
class AppComponent implements OnInit{
  @Input() el: ElementRef // or HTMLElement;
  title="hello world angular";

  ngOnInit() {
       el.nativeElement.createAttribute("appFont");
       // or 
       document.getElementById("header").createAttribute("appFont")
  }
}

Answer 2

指令首先是一个类。

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

const highlight = new HighlightDirective(...);

<块引用>

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

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

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

2 个答案:

指令首先是一个类。