angular - 将指令附加到动态添加的元素

Question

当您使用另一个元素的 ElementRef.nativeElement.innerHTML 将带有指令的元素添加到 DOM 时属性，该指令不会触发。如何以触发指令的方式将元素添加到 DOM？

例子
如果在我的组件中我做了类似下面的事情:

export class AppComponent implements OnInit {

    constructor(private _elem: ElementRef) { }    

    ngOnInit() {
        this._elem.nativeElement.innerHTML = '<span myDirective>Foo</span>';
    }

}

(这是对我的实际实现的重大简化，所以让我们暂时忽略这是一种不好的做法)

然后 myDirective似乎附加到 <span>永远不会真正运行。

问题是:我如何获得 Angular 来识别带有指令的新元素以便它运行？

Answer 1

从 Angular 2+ 中删除了动态编译。另一种替代方法是使用 Dynamic Component Loader 动态加载组件。为此，您必须更改现有的实现

https://angular.io/guide/dynamic-component-loader