Angular2 ngSwitch только с <template>

Я хотел бы использовать ngSwitch для условного рендеринга некоторого контента, но я хочу, чтобы этот контент был единственным, который будет отображаться в DOM. Я проиллюстрирую пример.

Это то, что у меня есть:

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

Я хочу изменить родительский элемент с <div> на <template>, поэтому в DOM фактически вставляются только самые внутренние элементы. Я подозреваю, что это возможно, потому что я знаю, что вы можете сделать что-то подобное с помощью ngFor, то есть:

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

Однако мне не удалось выяснить, как я могу заставить его работать с ngSwitch

Ответы

Ответ 1

Теперь это поддерживается с момента выпуска. Следующий код может быть применен к вашему примеру:

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

Подробнее см. для получения дополнительной информации

Ответ 2

Если вы хотите удалить прилагаемый тег, вы можете использовать ng-container вместо div. Тогда вам нужно предоставить все, что вы хотите, в корпусе коммутатора (здесь ниже "divs" ). Спасибо @Stephane Leger за трюк

<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

Начиная с Angular 6 ng-template или template не работает, используйте 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>

Ответ 4

Это не поддерживается. См. Этот вопрос https://github.com/angular/angular/issues/3306

Из этого комментария https://github.com/angular/angular/issues/3306#issuecomment-125368361

Это работает по назначению. Я знаю, что это немного странно. Но если мы изменим он
<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>
Что бы он сказал, что <ul> не следует создавать до тех пор, пока ng-switch решает, что он должен быть создан. Это означает, что вложенные ng-switch-when никогда не будет создан. Если бы ng-switch каким-то образом пропустите сам, он удалит <ul>, который изменит пользователя поведение. Таким образом, нет простого способа создания вложенности.

Вспомните ng-switch как контейнер. Он всегда есть и думает о ng-switch-when в качестве шаблонов, которые могут или нет. контейнер не может быть удален и, следовательно, не может иметь *

Ответ 5

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

Ответ 6

<ng-container [ngSwitch]="activeLayout">
  <ng-container *ngSwitchCase="'layout1'" [ngTemplateOutlet]="template1"></ng-container>
  <ng-container *ngSwitchDefault [ngTemplateOutlet]="defaultTemplate"></ng-container>
</ng-container>

Это мое решение, когда мне нужно переключить другой ng-шаблон. Я надеюсь, что это работает для вас.