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

子<my-subcomponent>元素在没有<span>模板的情况下会渲染到标记中，但是裸露。我想我错过了相当于Angular1的$compile服务，或者我在错误的生命周期中做了正确的代码。非常感谢有人对我有所了解。

Answer 1

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

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

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

1 个答案: