[英]Adding new Component element to DOM in Angular 2 at runtime doesn't render the component
我正在嘗試在運行時動態添加DOM中的新節點。 新節點基本上是組件選擇器。 問題在於該組件的內容未呈現，因此結果只是具有空的HTML標記。
我使用的是Angular 2.0文檔示例，並對其進行了一些修改，以顯示案例。
我要做的就是重用代碼，當我單擊正文以創建新的銷售稅元素時。 顯然它不起作用。
這是我在主體頂部添加的新腳本元素。
<script>
function add(){
var element = document.createElement('sales-tax');
document.getElementsByTagName("my-app")[0].appendChild(element);
}
</script>
當我單擊主體時，該函數將被調用。
<body onclick="add()">
<my-app>Loading...</my-app>
</body>
這就是結果。 如您所見，在運行時之前已添加到模板的銷售稅已呈現，但是我在運行時添加的稅是空的。
Angular交替渲染dom以生成實際的DOM，並使用Zone.js綁定它們，這只是一種方式，不會檢測到對DOM所做的更改。
Angular僅在其在Zone.js范圍內運行時才會檢測到更改。
然后還有其他內部綁定和生成過程，以使組件真正起作用並與應用程序的其余部分綁定。
要實現您要嘗試的功能，您必須使用@echonax所提到的DynamicComponetLoader ，但由於現在已棄用 ，因此應該改用ViewContainerRef.createComponent（） 。
createComponent()版本： Plunker
this.resolver.resolveComponent(HeroListComponent).then((factory:ComponentFactory<any>) => {
this.cmpRef = this.theBody.createComponent(factory)
});
具有.loadNextToLocation() beta.17（不建議使用）版本： Plunker（不建議使用）
addCmp(){
console.log('adding');
this.dcl.loadNextToLocation(HeroListComponent, this.theBody);
}
您不是在創建組件，而是在創建html元素並將其附加到恰好與組件選擇器具有相同名稱的DOM上。
為了實現所需的功能，必須使用DynamicComponentLoader 。
在RUNTIME上將Bootstrap組件添加到HTML元素時無法正確呈現
[英]Adding Bootstrap component to an HTML element on RUNTIME doesn't render properly
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.