Angular2 - Vorlage Referenz innerhalb NgSwitch

Question

Ich habe eine NgSwitch Vorlage. Im NgSwitch möchte ich einen Vorlagenreferenz auf die initialisierte Vorlage erhalten. Etwas wie folgt aus:

<div class="container" [ngSwitch]="model.type"> 
     <first-component #ref *ngSwitchCase="0"></first-component> 
     <second-component #ref *ngSwitchCase="1"></second-component> 
     <third-component #ref *ngSwitchCase="2"></third-component> 
    </div> 

Wenn auf eine Schaltfläche in der Komponente klicken ich auf den initialisierten Komponente aufgerufen werden soll (erste/zweite/dritte) ein Verfahren (die auf eine Schnittstelle definiert, die alle diese drei Komponenten implementieren) . Das Problem ist, dass ViewChild nicht definiert ist. Wenn ich #ref zum Container div bewegen, wie folgt aus:

<div class="container" #ref [ngSwitch]="model.type"> 
    <first-component *ngSwitchCase="0"></first-component> 
    <second-component *ngSwitchCase="1"></second-component> 
    <third-component *ngSwitchCase="2"></third-component> 
</div> 

Die ViewChild (Template-Referenz) initialisiert, aber dann kann ich die Methode der Komponente aufrufen.

Wie kann ich sowohl die NgSwitch-Direktive als auch die Template-Referenzvariable verwenden? Oder auf der anderen Seite, wie kann ich die initialisierte Komponente von ihrem Elternteil aufrufen (in einem Fall verschiebe ich die #ref zum Container div).

Answer 1

Es funktioniert, wenn Sie eine Vorlage Referenzgröße am ngSwitchCase verwenden, auf diese Weise:

<div class="container" [ngSwitch]="model.type"> 
    <first-component #ref *ngSwitchCase="0"></first-component> 
    <second-component #ref *ngSwitchCase="1"></second-component> 
    <third-component #ref *ngSwitchCase="2"></third-component> 
</div> 

Beachten Sie, dass, wenn Sie:

export class SomeComponent { 

    @ViewChild('ref') ref; 
... 

Dann ref noch nicht auf, wenn die festgelegt ist Konstruktor wird aufgerufen. Nicht einmal am Anfang. Nur nach Ansicht init.

diese Weise mit den folgenden Komponenten:

export class AppComponent implements OnInit, AfterViewInit { 
    model = {type: 0}; 

    @ViewChild('ref') ref; 

    constructor() { 
    console.log('constructor:', this.ref); 
    } 
    ngOnInit() { 
    console.log('ngOnInit:', this.ref); 
    } 
    ngAfterViewInit() { 
    console.log('AfterViewInit:', this.ref); 
    } 

} 

Die Ausgabe lautet:

constructor: undefined 
ngOnInit: undefined 
AfterViewInit: FirstComponent {...} 

demo plunker here See.

Answer 2

Vorlage Referenzvariable sollte nicht mit strukturellen Anweisung arbeiten. Hier wird ein Grund erläutert: Thomas Hilzendegen's blog

Meine Lösung besteht darin, eine Vorlagenreferenzvariable für ein Container-Tag zu erstellen, wobei [ngSwitch] verwendet wird, und dann mit der Eigenschaft children auf das untergeordnete Element zuzugreifen. Zum Beispiel

<div [ngSwitch]="..." [class.error] = "(elem.children.item(0).className.indexOf('someClass') !== -1" #elem> 
... 
</div>