web-dev-qa-db-fra.com

Comment ngSwitch fonctionne-t-il dans Angular2?

J'essaie d'utiliser ngSwitch en tant que dans cet exemple mais j'obtiens une erreur:

enter image description here

Mon composant:

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

Mon plunker - wizard.ts

Qu'est-ce que j'ai raté? Merci

angularangular2-template
25
Slip

mettre à jour

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

original

Les modèles sont sensibles à la casse (depuis beta.47 AFAIR). Les sélecteurs de directive (attribut) ont été changés en cas de chameau. Par exemple de ng-switch à ngSwitch.

Les noms de balises utilisent toujours des tirets pour assurer la compatibilité avec les composants Web. Par exemple <router-link>, <ng-content>.

Plus de détails à 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>
27
Günter Zöchbauer

Trois choses à garder à l'esprit ngSwitch, ngSwitchCase et ngSwitchDefault.

  1. ngSwitch - définit le property value de model. Par exemple - viewMode, qui est une propriété de votre composant.

  2. ngSwitchCase - Définit le rendu lorsque le value du property défini dans ngSwitchChanges. Par ex. quand viewMode = 'map'

  3. ngSwitchDefault - Définit le rendu si le value ne correspond pas. Par ex. quand viewMode=undefined. La valeur par défaut sera rendered.

Un autre point important est que nous devons définir le [ngSwitchCase] dans un <template></template> Élément HTML sinon cela ne fonctionnera pas. Angularest automatiquement converti en un <div> tag.

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

Bonne chance.

11
Akash

Il y a aussi * ngSwitchDefault que je n'ai pas vu dans la documentation sur le site. Comme son nom l'indique, cette option sera utilisée par défaut si elle ne correspond pas aux autres cas.

Ceci est principalement un heads-up si quelqu'un se heurte à cela.

4
Christopher Whitehead