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

Question

我对 ngSwitch 指令有点困惑——无论是“属性指令”还是“结构指令” 。

属性指令用“方括号”编写，如 [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 的指令类型吗？

Answer 1

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

这在 Angular 的文档中有清楚的解释......

• NgSwitch — 一个属性指令，改变其伴随指令的行为。
• NgSwitchCase —结构指令，当它的绑定值等于 switch 值时将其元素添加到 DOM，并在它不等于 switch 值时删除其绑定值。
• NgSwitchDefault —结构指令，当没有选择的 NgSwitchCase 时将其元素添加到 DOM。

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

Answer 2

这是一个结构性指令

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

Answer 3

据我了解， “结构指令”会更改 dom 的结构。 属性指令改变dom的属性，如颜色、背景等

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

Answer 4

结构指令：

什么是结构指令？

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

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

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

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

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