ngSwitch 是“属性指令”还是“结构指令”？答案

【问题标题】：ngSwitch is "Attribute Directive" OR "Structural Directive" ?ngSwitch 是“属性指令”还是“结构指令”？
【发布时间】：2019-04-08 09:51:31
【问题描述】：

我对 ngSwitch 指令有点困惑——无论是 'attribute directive' 还是 'structural directive'。

属性指令用“方括号”写成，例如 [ngStyle]、[ngClass] 等（我们将其写为 [ngSwitch]，将其称为“属性指令”）。

结构指令用 'aestrick' 编写，例如 *ngFor、*ngIf 等（我们将 case 写成 *ngSwitchCase="..."，这意味着它是结构指令） .

<div [ngSwitch]="colorValue">
    <p *ngSwitchCase="red">Red</p>
    <p *ngSwitchCase="blue">Blue</p>
    <p *ngSwitchCase="green">Green</p>
</div>

根据上面的代码，将 ngSwtich 归类为任一指令类别变得非常混乱！有人可以帮助我理解 ngSwitch 的指令类型吗？

【问题讨论】：

标签： javascript angular dom angular2-directives ng-switch

【解决方案1】：

[ngSwitch] 是一个属性指令，与*ngSwitchCase 和*ngSwitchDefault 结合使用，它们都是结构性指令。

这在 Angular 的文档中有明确的解释...

NgSwitch — 一个属性指令，可以改变其配套指令的行为。

NgSwitchCase — 结构指令在其绑定值等于开关值时将其元素添加到 DOM，并在其不等于开关值时移除其绑定值。

NgSwitchDefault — 结构指令，当没有选定的 NgSwitchCase 时将其元素添加到 DOM。

https://angular.io/guide/built-in-directives#switching-cases-with-ngswitch

【讨论】：

然而在同一个docs："本节介绍常见的结构指令：NgIf、NgSwitch、NgForOf"？最好引用 “NgSwitch 本身不是一个结构指令。它是一个属性指令，控制其他两个 switch 指令的行为。这就是为什么你写 [ngSwitch]，从不 *ngSwitch....”来自here
链接可能已过期.. 尝试：angular.io/api/common/NgSwitch
@KieranRyan 谢谢，我更新了文档新相关部分的过时链接。

【解决方案2】：

据我了解，'structural directive' 改变了 dom 的结构。 属性指令改变dom的属性，如颜色、背景等

ngSwitch 改变它的孩子的长度，所以它是一个结构指令，

【讨论】：

【解决方案3】：

这是一个structural directive

结构指令通过添加或删除元素来更新 DOM 布局。

【讨论】：

【解决方案4】：

结构指令：

什么是结构指令？

结构指令负责 HTML 布局。它们塑造或重塑 DOM 的结构，通常是通过添加、删除或操作元素。

与其他指令一样，您将结构指令应用于宿主元素。然后该指令对宿主元素及其后代执行它应该做的任何事情。

结构指令很容易识别。星号 (*) 位于指令属性名称之前，如本例所示。

参考：https://angular.io/guide/structural-directives

【讨论】：

【解决方案5】：

ngSwitch 是一个内置的结构指令。 [https://angular.io/guide/structural-directives]

@j3ff: *ngSwitchCase 上的 (*) 星只是糖语法，它不指示指令的类型。

可以这么写……

<div class="course-category" [ngSwitch]="colorValue">
 <ng-template [ngSwitchCase]="'RED'">
  <div>
   <p>Red</p>
  </div>
 </ng-template>

【讨论】：