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