了解angular2中的NgSwitch

时间:2016-07-20 06:31:19

标签: typescript angular ng-switch

你好我得到一个错误,因为我正在尝试学习angular2。我决定在父组件中替换子组件。子组件A和B都将使用内置的ngSwitch互相替换。但我得到一个错误抱怨它不是绑定到child-componentA和child-componentB的本机属性。它似乎无法将属性绑定到两个子组件。但下面我遇到了一个有效的解决方案,但不明白为什么后者有效。我按照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文档的示例

使用以下代码解决问题:

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

1 个答案:

答案 0 :(得分:0)

如果您使用的是最新的RC4版本,请查看NgSwitch

的此文档