使用ng-content访问父组件中的子项

时间:2016-11-29 10:55:06

标签: templates angular parent-child

我的父组件在其模板中具有动态子项数。

这就是父母的创建方式:

<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添加的动态)。

此致

0 个答案:

没有答案