Понимание NgSwitch в angular2

Question

Привет, у меня есть ошибка, поскольку я пытаюсь изучить angular2. Я решил пойти на замену дочерних компонентов в родительском компоненте. Оба дочерних компонента A и B заменяют друг друга, используя встроенный ngSwitch. Но я получил ошибку, жалуясь на то, что она не является родным свойством, связывающим как child-componentA, так и child-componentB. Кажется, что он не привязывает свойство к дочерним компонентам. Но ниже я столкнулся с решением, которое работает, но не понимает, почему последнее работает. Я следил за учебниками с углового2. Может ли кто-нибудь объяснить, почему первый провал и второе предоставленное решение работало. Благодарю.

parent.html

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

component.ts файл родителя:

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

Код ниже решить мою проблему, но я не в состоянии понять, почему предыдущий код выше не удалось, как я следовал примеры из anuglar docs

Решенная проблема с использованием приведенного ниже кода:

<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

Если вы используете последнюю версию RC4, проверить эту документацию для NgSwitch