理解angular中的NgSwitch 2

Question

你好，我在学习angular2时出错了。我决定尝试在父组件中替换子组件。子组件A和B都将使用内置的ngSwitch来相互替换。但我遇到了一个错误，抱怨它不是同时绑定到子组件a和子组件B的本地属性。似乎无法将属性绑定到两个子组件。但下面我看到了一个有效的解决方案，但不明白为什么后者有效。我遵循了angular2的教程。有人能解释一下为什么第一个解决方案失败了，而提供的第二个解决方案奏效了吗。谢谢

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