ngSwitch 在 Angular2 中如何工作？

Question

我正在尝试将 ngSwitch 用作 in this example 但我得到一个错误：

我的组件：

  template: `
    <div layout="column" layout-align="center center">   
   <div [ng-switch]="value">
       <div *ng-switch-when="'init'">
     <button md-raised-button class="md-raised md-primary">User</button>
     <button md-raised-button class="md-raised md-primary">Non user</button>

     </div>
  <div *ng-switch-when="0">Second template</div>
  <div *ng-switch-when="1">Third Template</div>
</div>
  </div>`,
    directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
 })

My plunker - wizard.ts

我错过了什么？谢谢

Answer 1

更新

见https://angular.io/api/common/NgSwitch

原创

模板区分大小写（自 beta.47 AFAIR 起）。指令（属性）选择器更改为驼峰大小写。例如从 ng-switch 到 ngSwitch.

标签名称仍然使用破折号以与网络组件兼容。例如 <router-link>, <ng-content>.

更多详情ngSwitchCase

https://angular.io/docs/ts/latest/api/common/index/NgSwitchCase-directive.html

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
</container-element>

https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <ng-container *ngSwitchCase="match_expression_3">
    <!-- use a ng-container to group multiple root nodes -->
    <inner-element></inner-element>
    <inner-other-element></inner-other-element>
  </ng-container>
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

https://angular.io/docs/ts/latest/api/common/index/NgSwitchDefault-directive.html

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-other-element *ngSwitchDefault>...</some-other-element>
</container-element>

Answer 2

老办法

Working Demo。 你可以查看浏览器的控制台

将 ng-switch 更改为 ngSwitch
将 ng-switch-when 更改为 ngSwitchWhen

<div layout="column" layout-align="center center">

       <div [ngSwitch]="value">
      <div *ngSwitchWhen="'init'">
         <button md-raised-button class="md-raised md-primary">User</button>
         <button md-raised-button class="md-raised md-primary">Non user</button>

      </div>
      <div *ngSwitchWhen="0">Second template</div>
      <div *ngSwitchWhen="1">Third Template</div>
    </div>
 </div>
   <button md-fab
 class="md-fab wizard_button--next"
  aria-label="about"
  (click)="onNext()">
<i class="material-icons" md-icon="">play_arrow</i>
 </button>

新方式

ANGULAR.2.0.0 或 最终版本

更新：如何在Angular2.0.0或最终版本[=中使用ngSwitch 52=] ???

请注意最终版本中的内容有所更改，因此如果您使用的是最终版本，请阅读下面的简单示例。

简单演示：http://plnkr.co/edit/IXmUm2Th5QGIRmTFBtQG?p=preview

@Component({ selector: 'my-app', template: ` <button (click)="value=1">select - 1</button> <button (click)="value=2">select - 2</button> <button (click)="value=3">select - 3</button> <h5>You selected : {{value}}</h5> <hr> <div [ngSwitch]="value"> <div *ngSwitchCase="1">1. Template - <b>{{value}}</b> </div> <div *ngSwitchCase="2">2. Template - <b>{{value}}</b> </div> <div *ngSwitchCase="3">3. Template - <b>{{value}}</b> </div> <div *ngSwitchDefault>Default Template</div> </div> `, }) export class AppComponent {}

Answer 3

还有 *ngSwitchDefault 我在现场文档中没有看到。顾名思义，如果不满足其他情况就默认为这个。

如果有人遇到这个问题，这主要是一个提醒。

Answer 4

三件事要牢记 ngSwitch、ngSwitchCase 和 ngSwitchDefault。

ngSwitch - 设置 model 的 property value。例如 - viewMode，这是您组件中的属性。
ngSwitchCase - 定义在 ngSwitchChanges 中定义的 property 的 value 时要渲染的内容。对于前。当 viewMode = 'map'
ngSwitchDefault - 定义 value 不匹配时要渲染的内容。对于前。当 viewMode=undefined。默认值为 rendered.

另一个要点是我们需要在<template></template>HTML元素 不然不行。 Angular会自动将其转换为 <div> 标签。

    <div [ngSwitch]="'viewMode'">
      <template [ngSwitchCase]="'map'" ngSwitchDefault> 
         Map View Content...   
       </template>      
       <template [ngSwitchCase]="'list'"> 
          List View Content...
      </template>
    </div>

祝你好运。

ngSwitch 在 Angular2 中如何工作？

How does ngSwitch work in Angular2?

angular2-template

angular