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> 

正如你所看到的，我用（我的）标准，我的标题为我的手风琴和我的手风琴项目

所以在我-Accordion组件我有逻辑

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

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

所以，如果我有我的看法完全一样在我前面的例子，它的工作原理确定....和标题回来是“我的手风琴”但是，如果我没有在我的标题元素我的手风琴的根源....这样的：

<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树子

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

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 : get hold of an element in the template