动态地将Angular2组件附加到dom

Question

我希望能够单击按钮以添加新组件.因此,例如,如果Angular 2更像Angular 1,我可以这样做:

<button (click)="addComponent()">add</button>

TS:

addComponent():void { 
    let component =  $compile('<component-selector></component-selector>')(scope)
    ele.append(component)
}

注意:我知道在这里已经问了几次类似的问题,但我读过的答案是矛盾的,而且大多依赖于不推荐使用的代码,例如DynamicComponentLoader.我在官方文档上找不到任何相关内容,理想情况下想要找到一种标准化的方法.

Answer 1

不,Angular 2与Angular 1差不多,而在Angular 1中这样做从来就不是推荐的操作DOM的方法.

建议的方法是修改模型,并使用模板从模型生成HTML:

private components = [];

addComponent() {
    this.components.push({}); // this object would typically contain the inputs of the component
}

并在模板中:

<component-selector *ngFor="let c of components"></component-selector>