Question

事实上，我正在寻找一种将指令动态传递给Angular 6+组件的方法。

首先，我遵循动态组件，但是我发现它并不是真正动态的，因为您必须事先知道组件列表并导入它们。然后，我找到了ng-dynamic一个不错的解决方案，但是这个解决方案的问题是我们不能使用Input，Output和Directives不会被触发。链接：https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html

app.component.ts：

dynamic_content = "<app-test appTest></app-test>";

app.component.html：

<dynamic-html [content]="dynamic_content"></dynamic-html>

test.component.html：

<p> Hello World </p>

test.directive.ts：

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

@Directive({
  selector: '[appTest]'
})
export class TestDirective {

  constructor(private _el: ElementRef, private _renderer: Renderer2) { }

  ngAfterViewInit(): void {
    this._renderer.setStyle(this._el.nativeElement, 'color', 'red');

  }

}

这是一个简单的用例，我们希望以红色显示文本，但是什么也没有发生。请注意，当我在ngAfterViewInit函数中添加console.log时，不会记录任何内容，这表示未触发该指令。

在Angular 6 +

0 个答案: