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

旧方法

<小时/> 的 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 >

请注意最终版本中的内容已经更改，因此如果您使用的是最终版本，请通过以下简单示例进行更改。

简单演示：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 2

<强>更新

请参阅https://angular.io/api/common/NgSwitch

<强>原始

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

标记名称仍然使用破折号来与Web组件兼容。例如<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 3

要记住三件事ngSwitch，ngSwitchCase和ngSwitchDefault。

ngSwitch - 设置property value的{{1}}。例如 - model，它是组件中的属性。
ngSwitchCase - 定义在viewMode中定义的value的{{1}}时要呈现的内容。对于前者何时property
ngSwitchDefault - 定义ngSwitchChanges不匹配时要呈现的内容。对于前者何时viewMode = 'map'。默认值为value。

另一个重要的一点是我们需要在viewMode=undefined HTML元素中设置rendered，否则它将无效。 [ngSwitchCase]会自动将其转换为<template></template>代码。

Angular

祝你好运。

Answer 4

还有* ngSwitchDefault，我在网站上的文档中没有看到。就像名字暗示的那样，如果它不符合其他情况，它将默认为此。

如果有人碰到这一点，这主要是一个抬头。

ngSwitch如何在Angular2中工作？

4 个答案: