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

、それは全体のDOMサブツリーに最初に私のタイトルを取得するため、タイトルが「私のアコーディオン項目1」、に設定されます

はただ直接の子をチェックするが方法ですか？

Answer 1

@ContentChild()ませんが、 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