2017-03-09 44 views
1

我有this plunker演示動態組件注入。問題是,當我有以下....我可以在ViewChild中插入Angular 2組件,而不是在之後?

template: ` 
    <div> 
    <div #body class="body"></div> 
    </div> 
`, 

我想它注入INSIDE人體格,但是,它的附加組件股利。

所以不是...

<div> 
    <div></div> 
    <my-app-2> 
    <div> 
     <h2>Hello Angular2</h2> 
    </div> 
    </my-app-2> 
</div> 

我想...

<div> 
    <div> 
    <my-app-2> 
     <div> 
     <h2>Hello Angular2</h2> 
     </div> 
    </my-app-2> 
    </div> 
</div> 

我知道我可以做這樣的事情......

template: ` 
    <div> 
    <div class="body"> 
     <div #body> 
    </div> 
    </div> 
`, 

但它有沒有額外的div標籤做到這一點的方法?

+1

不,這是不可能的。如果你想插入它,你需要一個來自「內部」的'ViewContainerRef' –

+0

怎樣向注入的組件添加一個類? – Jackie

+0

不確定你的意思。你的意思是一個CSS類嗎?我看不出你能用班級做什麼。這是'ViewContainerRef.createComponent'的工作方式 - 組件作爲兄弟添加。 –

回答

2

但有沒有辦法做到這一點,沒有額外的div標籤?

是的,你可以使用ng-container元素:

<div class="body"><ng-container #body></ng-container></div> 

它表示爲DOM的註釋中,因此你不會在你的DOM有一個額外的元素

檢查這個plunker

+0

因此,在這種情況下,注入組件後將不會有ng-container標籤?我只是認爲這是爲了編譯,而且每次選擇更改時都會呈現不同的組件。 – Jackie

+0

似乎沒有工作https://embed.plnkr.co/GjY55AFSeirJQmcotVNP/你能提供一個你的意思嗎? – Jackie

+1

@Jackie,你需要使用'ng-container',而不是'ng-content'。檢查此[plunker](https://plnkr.co/edit/gNXXxxj5zhbOjknOeTAe?p=preview) –

1

ViewContainerRef.createComponent()只允許添加目標元素的兄弟。如果要將元素添加爲子元素,則目標需要是該元素的子元素。

有很多關於這方面的討論,但我沒有得到這種改變的印象。

+0

儘管我說過,今天下午讓它工作後,發現它不會包含其他元素來呈現I我接受了另一個答案。我仍然認爲你的應該被視爲最「官方」 – Jackie

相關問題