我的父组件在其模板中具有动态子项数。
这就是父母的创建方式:
<parent>
<child>
custom html
</child>
<child>
custom html
</child>
</parent>
这是父组件:
@Component({
selector: 'parent',
template: `
<div class="parent-children">
<ng-content></ng-content>
</div>
`
})
我的问题是我想在子级1和子级2之间动态插入特定的HTML,最好的选择是在父组件中执行。
基本上我需要这样的东西(虽然这不起作用,只是演示):
@Component({
selector: 'parent',
template: `
<div class="parent-children">
<ng-content select="[children][0]></ng-content>
<div> custom html</div>
<ng-content select="[children][1]></ng-content>
</div>
`
})
请注意,我可以接触父母的孩子,但这并没有多大帮助:
@ContentChildren(Child)
private children: QueryList<Child>;
有没有办法实现类似的东西?基本上选择父模板中的特定子项,尽管它们已经在父项的基本html标记中定义(不是通过ngFor从某些dataSource添加的动态)。
此致