Angular2 Komponenten :: ViewChild/ContentChild nach Klasse

Question

Ich versuche, wie so eine erweiterbare Komponente zu entwerfen:

<collapsable [expanded]="myFlag"> 
    <div title>Summary</div> 
    <div alternate-title>Heading</div> 
    <div content>Details</div> 
</collapsable> 

Der alternate-title Teil soll optional sein. Wenn myFlag = false sollte die Komponente nur machen:

<div title>Summary</div> 

Wenn jedoch myFlag = true sollte die Komponente eine der folgenden machen:

// If alternate-title exists.. 
<div alternate-title>Heading</div> 
<div content>Details</div> 

// If alternate-title does not exist.. 
<div title>Summary</div> 
<div content>Details</div> 

Im Moment habe ich die Vorlage für diese Komponente wie folgt definiert :

<ng-content *ngIf="!expanded" select="[title]"></ng-content> 
<ng-content *ngIf="expanded" select="[alternate-title]"></ng-content> 
<ng-content *ngIf="expanded" select="[content]"></ng-content> 

Dies funktioniert für das erste Szenario in Ordnung (wenn alternate-title vorhanden ist). Im zweiten Szenario funktioniert es jedoch (offensichtlich) nicht. Damit es für das zweite Szenario funktioniert, muss in meiner Komponente ein Verweis auf alternate-title abgerufen werden. Eine Möglichkeit, das zu tun, ist unten:

// In page.html.. 
<div #alternateTitle alternate-title>...</div> 

// In component.ts 
@ContentChild('alternateTitle') alternateTitle: ElementRef; 

Allerdings habe ich diesen Ansatz nicht mag, wie es mich zwingt, eine lokale Variable für alternate-title zu definieren, die redundant ist.

Gibt es eine Möglichkeit, einen Verweis auf alternate-title in meiner Komponente zu erhalten, um zu überprüfen, ob der Benutzer meiner Komponente es definiert oder nicht?

Answer 1

Wir brauchen ein Wrapper-Element mit einem Template-Variable:

<ng-content *ngIf="!expanded" select="[title]"></ng-content> 
<span #titleWrapper><ng-content *ngIf="expanded" select="[alternate-title]"></span></ng-content> 
<ng-content *ngIf="expanded" select="[content]"></ng-content> 

Dann können wir das Element mit @ViewChild() abfragen und dann prüfen, ob sie den Inhalt enthalten, stellen wir sind interesed in:

@ViewChild('titleWrapper') titleWrapper:ElementRef; 

ngAfterContentInit() { 
    let title = this.titleWrapper.nativeElement.querySelector('[alternative-title]'); 
    ... 
}