Angular2 ngSwitch仅限<template>

Question

我想使用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>

我想将父元素从a更改<div>为a,<template>因此只有最内部元素才会实际插入到DOM中.我怀疑它可能是可能的,因为我知道你可以做类似的事情ngFor,即:

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

但是,我还没有弄清楚如何才能让它工作 ngSwitch

Answer 1

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

当我需要切换不同的 ng-template 时，这是我的解决方案。我希望这个对你有用。

Answer 2

从最终版本开始,现在支持这一点.以下代码可以应用于您的示例:

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

有关详细信息,请参阅文档

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

Answer 4

如果你想移除封闭标签，你可以使用 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>