Angular2：@ContentChild - 只有直接的孩子

Question

因此，为了更好地说明将简化并尽可能简洁。

<my-accordion>
    <my-title>My accordion</my-title>

    <my-accordion-item>
        <my-title>My accordion item 1</my-title>
        <my-content>Content 1</my-content>
    <my-accordion-item>
    <my-accordion-item>
        <my-title>My accordion item 2</my-title>
        <my-content>Content 2</my-content>
    <my-accordion-item>
</my-accordion>

如你所见，我使用（我的）标准my-title作为my-accordion和my-accordion-item

所以在我的手风琴组件中我有逻辑

private title:string = '';
@ContentChild( myTitle ) myTitle: myTitle;

ngAfterViewInit(){
    if(this.myTitle && this.myTitle.content.length !== 0){
        this.title = this.myTitle.content;
    }
}

所以，如果我的观点与我之前的例子完全一样，那就可以了......并且回来的标题是“ 我的手风琴 ”但是，如果我的my-title元素没有my- title-手风琴......像这样：

<my-accordion>        
    <my-accordion-item>
        <my-title>My accordion item 1</my-title>
        <my-content>Content 1</my-content>
    <my-accordion-item>
    <my-accordion-item>
        <my-title>My accordion item 2</my-title>
        <my-content>Content 2</my-content>
    <my-accordion-item>
</my-accordion>

标题将设置为“ 我的手风琴项目1 ”，因为它获得了整个DOM子树中的第一个my-title

有没有办法只检查直系孩子？

Answer 1

@ContentChild()不会，但@ContentChildren()执行https://angular.io/docs/ts/latest/api/core/index/ContentChildren-decorator.html

@ContentChildren( myTitle, {descendants: false}) myTitle: QueryList<myTitle>;

ngAfterContentInit() {
  console.log(this.myTitle.toArray()[0]);
}

另请参见angular 2 / typescript：获取模板中的元素