NgSwitch in angular2 verstehen

Question

Hallo, ich habe einen Fehler, als ich versuche, angular2 zu lernen. Ich entschied mich dafür, Kinderkomponenten in einer Elternkomponente zu ersetzen. Die beiden untergeordneten Komponenten A und B ersetzen sich gegenseitig mit dem eingebauten ngSwitch. Aber ich habe einen Fehler, der sich darüber beschwert, dass es keine native Eigenschaft ist, die sowohl an kind-componentA als auch an child-componentB bindet. Es scheint die Eigenschaft nicht an beide untergeordneten Komponenten zu binden. Aber unten bin ich auf eine Lösung gestoßen, die funktioniert, aber nicht versteht, warum letztere funktioniert. Ich folgte den Tutorials von angular2. Könnte jemand erklären, warum die erste fehlgeschlagene und zweite Lösung funktioniert hat? Vielen Dank.

Parent.html

<div class= "col-md-4" [ngSwitch]="componentNumber"> 
    <child-componentA *ngSwitchCase="1"> </child-componentA> 
    <child-componentB *ngSwitchCase="2"> </child-componentB> 
</div> 

component.ts Datei von parent:

import {Component} from '@angular/core'; 
//metadata tags defined but didn't need to include 

export class Parent { 

    componentNumber: number = 1; 

    ChangeComponent(value: number) { 
     this.componentNumber = value; 
    } 
} 

Der folgende Code mein Problem gelöst, aber ich bin Fehler zu verstehen, warum der vorherige Code oben ausgefallen, wie ich die gefolgt Beispiele von anuglar docs

gelöstes Problem den Code unten verwenden:

<div class="col-md-4" [ngSwitch]="componentNumber"> 
    <template> 
     <child-componentA [ngSwitchWhen]="1"></child-componentA> 
    </template> 
    <template> 
     <child-componentB [ngSwitchWhen]="2"></child-componentB> 
    </template> 
    </div> 

Answer 1

Wenn Sie die neueste Version RC4 verwenden, prüfen Sie diese Dokumentation für NgSwitch