在Angular 2中生成涉及自定义HTML元素的动态标记

Question

我希望在一个组件中动态生成标记，其中需要创建其他自定义组件的标记。 大致如下：

<my-component></my-component>

还有在myComponent.ts中

ngOnInit(){
    const el: HTMLElement = this.elementRef.nativeElement;

    let labels = ['one', 'two', 'three'];
    labels.forEach((label) => {
        let b = document.createElement('my-subcomponent');
        el.appendChild(b);
    });
}

mySubcomponent.html模板：

<span>测试</span>

<my-subcomponent>元素的子代将呈现在标记中，但是裸露的，没有<span>模板。我认为我缺少类似于Angular1的$compile服务，或者我在错误的生命周期时刻做了正确的代码。希望有人能为我解决这个问题。

- user776686

Answer 1

Angular2不会对动态添加的HTML中的绑定或匹配组件或指令选择器进行任何处理。Angular2只处理静态添加到组件模板中的HTML。

例如，您可以像Angular 2动态选项卡与用户点击选择的组件中所示一样动态添加组件。

- Günter Zöchbauer

---

谢谢提供链接。在这个策略中，是否有一种方法可以将属性附加到C1、C2、C3（在plunkr中），以便它们可以接受它们作为“inputs”？ - user776686

不可以在动态添加的组件中使用输入和输出。但是，链接的答案展示了如何通过编程方式传递数据。 - Günter Zöchbauer

感谢您的解释。 - user776686