Angular 2：在第n個孩子後動態添加組件

Question

有沒有一種優雅的方式可以在角度2中實現以下解決方案？

<div id="parent"> 
    <div>Child 1</div> 
    <div>Child 2</div> 
    <div>Child 3</div> 
</div> 

$("#parent > div:nth-child(2)").after("<div>foobar</div>"); 

我開始喜歡這個，但它是增加兒童1後，foobar的，我希望它過了一會兒2.

Dynamically insertion Plnkr

Answer 1

而不是使用ViewChild，你可以使用ViewChildren附加child component至last div。 ViewChildren將使用QueryList

@ViewChildren('target', {read: ViewContainerRef}) target: QueryList(ViewContainerRef); 

查看target div's孩子了，而要抓住最後一個div像這樣，

this.cmpRef = this.target._results[2].createComponent(factory) 
//<---added ._results[2] which returns last div element. 
//<---you can use ._result[0],_resultt[1],_result[2] to append dynamic component accordingly. 

工作演示：https://plnkr.co/edit/1KOK8gYgJnzAMUGnyy1P?p=preview

注意：現在，如果你願意，你可以使它更加動態。

---

UPDATE

由於_results是QueryList私有成員使用以下方法來防止tslint錯誤。

this.cmpRef = this.target.toArray()[index].createComponent(factory);