Angular 2 : Dynamically add component after n-th child

Question

有没有一种优雅的方法可以在 Angular 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>");

我开始喜欢这个，但它在 Child 1 之后添加 foobar。我想要在 Child 2 之后。

Dynamically insertion Plnkr

Answer 1

除了使用 ViewChild，您还可以使用 ViewChildren 附加 child component 到 last div。 ViewChildren 将使用 QueryList 查看目标 div 的 子级

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

并且需要像这样获取最后一个 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

注意:现在，如果需要，您可以使其更具动态性。

---

更新

由于 _results 是 QueryList 的私有(private)成员，因此使用以下内容来防止 tslint 错误。

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