Angular2: @ContentChild - nur unmittelbare Kinder

Question

So für bessere Illustration wird vereinfachen und versuchen, so knapp wie möglich zu sein.

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

Wie Sie sehen können, verwende ich (mein) Standard my-Titel für my-Akkordeon und my-Akkordeon-Artikel

Also in meinem-Akkordeon-Komponente I die Logik haben

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

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

Also, wenn ich meine Ansicht genau wie in meinem vorherigen Beispiel hatte, funktioniert es OK .... und der Titel zurück kommt ist "Mein Akkordeon" aber, wenn ich nicht das My-Titel-Element auf der Wurzel meines Akkordeons .... so:

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

würde der Titel auf „Mein Akkordeon Artikel 1“ gesetzt werden, weil es den ersten my-Titel in dem ganzen DOM Unterbaum

Gibt es eine Möglichkeit sofort Kinder nur zu überprüfen bekommt?

Answer 1

@ContentChild() nicht aber @ContentChildren() tut 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]); 
} 

See angular 2/typescript : get hold of an element in the template auch