javascript - ngSwitch 是 "Attribute Directive"还是 "Structural Directive"？

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 — an attribute directive that changes the behavior of its companion directives.
• NgSwitchCase — structural directive that adds its element to the DOM when its bound value equals the switch value and removes its bound value when it doesn't equal the switch value.
• NgSwitchDefault — structural directive that adds its element to the DOM when there is no selected NgSwitchCase.

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