在Angular 2中生成涉及自定義HTML元素的動態標記

我試圖在組件中動態生成標記，其中要創建的標記涉及其他自定義組件。在Angular 2中生成涉及自定義HTML元素的動態標記

<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服務，或者我在錯誤的生命週期中做了正確的代碼。希望有人能給我一些啓示。

來源

2016-10-04 user776686

Angular2不以任何方式處理綁定或匹配組件或指令選擇器，以動態添加HTML。 Angular2只處理靜態添加到組件模板的HTML。

您可以像顯示在 Angular 2 dynamic tabs with user-click chosen components

來源

2016-10-05 05:00:15

感謝您的鏈接動態例如添加組件。在這個策略中，是否有方法將屬性添加到C1，C2，C3（在PLUNK中），以便他們將它們接受爲「輸入」？ – user776686

不，您不能在動態添加的組件中使用輸入和輸出。鏈接的答案顯示瞭如何通過命令傳遞數據。 –

謝謝你的解釋 – user776686

在Angular 2中生成涉及自定義HTML元素的動態標記

回答

相關問題