angular - ngtemplateoutlet - ng-container vs ng-template

¿Cómo funciona ngSwitch en Angular2?

Question

Estoy tratando de usar ngSwitch como en este ejemplo, pero me sale un error:

Mi Componente:

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

Mi plunker - wizard.ts

¿Qué me perdí? Gracias

Answer 1

Tres cosas a tener en cuenta ngSwitch , ngSwitchCase y ngSwitchDefault .

1. ngSwitch : establece el property value de property value del model . Por ejemplo, viewMode , que es una propiedad en su componente.

2. ngSwitchCase : define qué representar cuando el value de la property define en ngSwitchChanges . Por ej. cuando viewMode = ''map''

3. ngSwitchDefault : define qué representar si el value no coincide. Por ej. cuando viewMode=undefined . El predeterminado será rendered .

Otro punto importante es que debemos establecer [ngSwitchCase] dentro de un elemento HTML <template></template> , de lo contrario no funcionará. Angular lo convertirá automáticamente en una etiqueta <div> .

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

Buena suerte.

Answer 2

actualizar

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

original

Las plantillas son sensibles a mayúsculas y minúsculas (desde beta.47 AFAIR). Los selectores de directivas (atributos) se cambiaron por camel case. Por ejemplo, de ng-switch a ngSwitch .

Los nombres de las etiquetas aún usan guiones para la compatibilidad con los componentes web. Por ejemplo <router-link> , <ng-content> .

Más detalles para 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

También hay * ngSwitchDefault que no vi en la documentación en el sitio. Al igual que el nombre implica, se usará de manera predeterminada si no cumple con los otros casos.

Esto es principalmente un aviso si alguien se encuentra con esto.

Answer 4

Vieja forma

Demostración de trabajo . puedes consultar la consola del navegador

cambiado ng-switch a ngSwitch
cambiado ng-switch-cuándo hacer 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> Nueva manera

ANGULAR.2.0.0 O Relase final

ACTUALIZACIÓN : ¿Cómo usar ngSwitch en Angular2.0.0 o versión final ?

Tenga en cuenta que las cosas han cambiado en la versión final, por lo que si está utilizando la versión final, por favor siga el ejemplo más simple.

DEMO simple: 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 {}