Как работает ngSwitch в Angular2?

Я пытаюсь использовать ngSwitch как в этом примере но я получаю сообщение об ошибке:

введите описание изображения здесь

Мой компонент:

  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]
 })

Мой плункер - wizard.ts

Что я пропустил? Спасибо вам

Ответы

Ответ 1

Обновление

См. https://angular.io/api/common/NgSwitch

оригинальный

Шаблоны чувствительны к регистру (начиная с бета-версии 47 AFAIR). Селекторы директивы (атрибута) были изменены на случай верблюда. Например, от ng-switch до ngSwitch.

Названия тегов по-прежнему используют тире для совместимости с веб-компонентами. Например <router-link>, <ng-content>.

Подробнее о ngSwitchCase

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

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

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

Ответ 2

Старый способ

Рабочий демонстрационный пример. вы можете проверить консоль браузера

изменено 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 ИЛИ Final Relase

ОБНОВЛЕНИЕ: как использовать ngSwitch в Angular2.0.0 или окончательный выпуск

Обратите внимание, что в финальной версии все изменилось, поэтому, если вы используете окончательный выпуск, пройдите ниже простого примера.

Простая DEMO: 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 {}

Ответ 3

Три вещи, которые следует иметь в виду ngSwitch, ngSwitchCase и ngSwitchDefault.

  • ngSwitch - установите property value в model. Например - viewMode, который является свойством в вашем компоненте.

  • ngSwitchCase. Определяет, что делать при value property, определенном в ngSwitchChanges. Напр. когда viewMode = 'map'

  • ngSwitchDefault. Определяет, что делать, если value не соответствует. Напр. когда viewMode=undefined. По умолчанию будет rendered.

Еще одна важная точка заключается в том, что нам нужно установить [ngSwitchCase] в HTML-элемент <template></template>, иначе это не сработает. Angular автоматически преобразует его в тег <div>.

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

Удачи.

Ответ 4

Существует также * ngSwitchDefault, который я не видел в документации на сайте. Так же, как и название, оно будет по умолчанию, если оно не соответствует другим случаям.

Это в основном голова, если кто-то сталкивается с этим.