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

有没有一种优雅的方式我可以在角度2中实现以下解决方案？

    
Child 1
    
Child 2
    
Child 3


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

我开始喜欢这个,但它在Child 1之后添加了foobar.我想在Child 2之后使用它.

动态插入Plnkr

而不是使用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

注意:现在,您可以根据需要使其更具动态性.

UPDATE

作为_results私人成员QueryList使用以下内容来防止tslint错误.

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