Angular2 ngSwitch avec <template> seulement

Je voudrais utiliser ngSwitch conditionnelle, de rendre un peu de contenu, mais je veux que le contenu à être la seule chose à être rendus à la DOM. Je vais illustrer par un exemple.

C'est ce que j'ai actuellement:

<div [ngSwitch]="thing.name">
    <template ngSwitchWhen="foo">
        <div>FOOOOOO</div>
    </template>
    <template ngSwitchWhen="bar">
        <div>BARRRR</div>
    </template>
    <template ngSwitchWhen="cat">
        <div>CAT</div>
    </template>¯
    <template ngSwitchWhen="dog">
        <div>DOG</div>
    </template>
</div>

J'aimerais changer le parent de l'élément à partir d'un <div> à un <template> afin que la plupart des éléments internes sont réellement inséré dans les DOM. Je soupçonne que c'est sans doute possible, parce que je sais que vous pouvez faire quelque chose comme ça avec ngFor, c'est à dire:

<template ngFor [ngForOf]="things" let-thing="$implicit">

Cependant, je n'ai pas été en mesure de travailler sur la façon dont je pourrais l'obtenir pour travailler sur un ngSwitch

Ceci est documenté dans angular2 docs ici : angulaire.io/docs/ts/latest/guide/...

OriginalL'auteur Hendrik | 2016-06-09

angular angular2-template

11

Est désormais pris en charge depuis la sortie de la version finale. Le code suivant peut être appliqué à votre exemple :
```
<div [ngSwitch]="thing.name">
    <template [ngSwitchCase]="foo">
        <div>FOOOOOO</div>
    </template>
    <template [ngSwitchCase]="bar">
        <div>BARRRR</div>
    </template>
    <template [ngSwitchCase]="cat">
        <div>CAT</div>
    </template>¯
    <template [ngSwitchCase]="dog">
        <div>DOG</div>
    </template>
</div>
```
Voir la documentation pour plus d'info

Merci pour la mise à jour!
[ngSwitchCase]="chat" va chercher une varible nommé cat
Comment voulez-vous faire ce travail avec ngSwitchDefault?
utilisation ng-template ou ng-container au lieu de template. docs
Rouge</p> <div *ngSwitchCase="toto">FOOOOOO</div> <div *ngSwitchCase="barre">BARRRR</div> <div *ngSwitchCase="chat">CHAT</div> <div *ngSwitchCase="chien">CHIEN</div> <p *ngSwitchDefault>univers..</p> </div>

OriginalL'auteur Ismail H

Si vous souhaitez supprimer la balise englobante, vous pouvez utiliser gn-conteneur au lieu de div. Alors à vous de fournir tout ce que vous voulez à l'intérieur de l'interrupteur de cas (ci-après 'les divs'). Grâce à @Stéphane Leger pour l'astuce

<ng-container [ngSwitch]="thing.name">
    <div [ngSwitchCase]="'foo'">
        Inner content 1
    </div>
    <div [ngSwitchCase]="'bar'">
        Inner content 2
    </div>
    <div [ngSwitchCase]="'cat'">
        Inner content 3
    </div>¯
    <div [ngSwitchCase]="'dog'">
        Inner content 4
    </div>
</ng-container>

OriginalL'auteur Flavien Volken

1

Qui n'est pas pris en charge. Voir ce problème https://github.com/angular/angular/issues/3306

À partir de ce commentaire https://github.com/angular/angular/issues/3306#issuecomment-125368361
Cela fonctionne comme prévu. Je sais que c'est un peu étrange. Mais si nous changeons
pour
```
<ul *ng-switch="value">   
  <li *ng-switch-when="'1'">is 1</li>   
  <li *ng-switch-when="'2'">is 2</li>   
  <li *ng-switch-default>is another value</li> 
</ul>
```
De ce qu'il allait dire, c'est que <ul> ne doit pas être créé jusqu'à ce que
ng-switch décide qu'il doit être créé. Cela signifie que le imbriquée
ng-switch-when ne serait jamais créé. Si ng-switch serait en quelque sorte
sauter lui-même, il l'enlèverait <ul> qui allait changer l'utilisateur
comportement. Donc, il n'y a pas de moyen simple de créer de nidification.

Pense ng-switch comme un conteneur. Il est toujours là, et de penser à
ng-switch-when en tant que modèles qui peuvent ou net peut être là. L'
conteneur ne peut pas être supprimé, et ne peuvent donc pas avoir *
Merci pour la réponse rapide, je vais chercher une autre solution.

OriginalL'auteur Günter Zöchbauer

Comme Angulaire 6 ng-template ou template dos fonctionne pas utiliser ng-container

<div [ngSwitch]="'case 3'">
  <ng-container *ngSwitchCase="'case 1'">
      <li > Case 1</li>
  </ng-container>
  <ng-container *ngSwitchCase="'case 2'">
      <li > Case 2</li>
  </ng-container>
  <ng-container *ngSwitchCase="'case 3'">
      <li > Case 3</li>
  </ng-container>
</div>

OriginalL'auteur Pranoy Sarkar

<div [ngSwitch] = "thing.name">
                <p *ngSwitchCase="'red'">para Red</p>
                <div *ngSwitchCase="foo">FOOOOOO</div>
                <div *ngSwitchCase="bar">BARRRR</div>
                <div *ngSwitchCase="cat">CAT</div>
                <div *ngSwitchCase="dog">DOG</div>
                <p *ngSwitchDefault>universe..</p>
            </div>

OriginalL'auteur Zeeshan Ali

Vous devez vous connecter pour publier un commentaire.