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>");

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

Dynamically insertion Plnkr

Answer 1

您可以使用 ViewChild 附加 ViewChildren ，而不是 child component 的 last div 即可。 ViewChildren 会使用 target div's

查看 QueryList 儿童

@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的私人成员，请使用以下内容来防止tslint错误。

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

角度2：在第n个孩子之后动态添加组件

1 个答案: