web-dev-qa-db-fra.com

Angular2 ngSwitch avec <template> uniquement

J'aimerais utiliser ngSwitch pour restituer certains contenus de manière conditionnelle, mais je veux que ce contenu soit la seule chose à restituer au DOM. Je vais illustrer avec 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 l'élément parent d'un <div> à un <template> afin que seuls les éléments les plus internes soient réellement insérés dans le DOM. Je suppose que c'est probablement possible, car 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 réussi à comprendre comment je pouvais le faire fonctionner sur une ngSwitch

angularangular2-template
8
Hendrik

Cela est maintenant supporté depuis 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 documentation pour plus d'informations

11
Ismail H

Si vous souhaitez supprimer la balise englobante, vous pouvez utiliser ng-container au lieu de div. Ensuite, à vous de fournir ce que vous voulez à l'intérieur du boîtier de l'interrupteur (ci-dessous «divs»). Merci à Stéphane Léger pour le tour

<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>
3
Flavien Volken

À partir de Angular 6 ng-template ou templatedos ne fonctionne pas utilisez 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>
1
Pranoy Sarkar

Ce n'est pas pris en charge. Voir ce numéro https://github.com/angular/angular/issues/3306

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 à

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

Ce que cela dirait, c'est que <ul> ne devrait pas être créé avant le ng-switch décide qu'il doit être créé. Cela signifie que le imbriqué ng-switch-when ne serait jamais créé. Si ng-switch serait en quelque sorte ignorer lui-même, cela supprimerait <ul>, ce qui changerait l'utilisateur comportement. Il n'y a donc pas de moyen simple de créer une imbrication.

Pensez à ng-switch comme un conteneur. Il est toujours là et pense à ng-switch-when comme modèles qui peuvent ou net peuvent être là. Le le conteneur ne peut pas être supprimé et ne peut donc pas avoir *

1
Günter Zöchbauer
<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>
0
Zeeshan Ali