仅具有 <template> 的 Angular2 ngSwitch

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>

我想将父元素从 <div> 更改为 <template>，这样只有最内部的元素才真正插入到 DOM 中。我怀疑这可能是可能的，因为我知道你可以用 ngFor 做类似的事情，即：

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

但是，我一直无法弄清楚如何让它在 ngSwitch

上运行

Answer 1

不支持。看到这个问题https://github.com/angular/angular/issues/3306

来自这条评论https://github.com/angular/angular/issues/3306#issuecomment-125368361

This works as intended. I know it is a bit strange. But if we change it to
<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>
What it would say is that <ul> should not be created until ng-switch decides it needs to be created. That means that the nested ng-switch-when would never be created. If ng-switch would somehow skip itself, it would remove <ul> which would change the user behavior. So there is no simple way to create nesting.

Think of ng-switch as a container. It always is there, and think of ng-switch-when as templates which may or net may be there. The container can not be removed, and hence can not have *

Answer 2

编辑：此答案已过时。请参阅@mrodri 对新语法的回答

自最终版本发布以来现在支持该功能。以下代码可应用于您的示例：

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

有关详细信息，请参阅 documentation

Answer 3

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

Answer 4

如果您想删除封闭标签，可以使用 ng-container 而不是 div。然后由你在 switch case 中提供你想要的任何东西（在下面 '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>

Answer 5

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

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

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

仅具有 <template> 的 Angular2 ngSwitch

Angular2 ngSwitch with <template> only

angular2-template

angular