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

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的{​​{1}}将永远不会实际运行。

问题是：如何通过指令识别新元素以使其运行？

Answer 1

动态编辑从Angular 2+中删除。另一种使用动态组件加载程序动态加载组件。为此，您必须更改现有的实施

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

Answer 2

如果要将组件嵌套在彼此内部，则需要查看：

• Content Projection和<ng-content>
  
• @ContentChild
• @ContentChildren
• QueryList。
  

Joshua Morony也做了一个Ionic youtube video - 涵盖了这些Angular特征。