angularjs - 动态地将 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>