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

【问题标题】：Generating dynamic markup involving custom HTML elements in Angular 2在 Angular 2 中生成涉及自定义 HTML 元素的动态标记
【发布时间】：2017-02-13 03:36:12
【问题描述】：

我正在尝试在组件中动态生成标记，其中要创建的标记涉及其他自定义组件。大致如下：

<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>test</span>

<my-subcomponent> 子元素确实会渲染到标记中，但是是裸露的，没有 <span> 模板。我想我错过了相当于 Angular1 的$compile 服务，或者我在错误的生命周期时刻执行了正确的代码。希望有人能对我有所启发。

【问题讨论】：

标签： angular components

【解决方案1】：

Angular2 不会以任何方式为动态添加的 HTML 处理绑定或匹配组件或指令选择器。 Angular2 只处理静态添加到组件模板的 HTML。

您可以动态添加组件，例如 Angular 2 dynamic tabs with user-click chosen components

【讨论】：

感谢您的链接。在这个策略中，有没有办法将属性附加到 C1、C2、C3（在 plunkr 中），以便他们接受它们为inputs？
不，您不能在动态添加的组件中使用输入和输出。链接的答案显示了如何强制地传入和传出数据。
感谢您的解释