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

Question

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

属性指令用'方括号'编写，如[ngStyle]、[ngClass]等（我们将其写为[ngSwitch]，将其称为'Attribute Directives').

结构指令是用'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

这是一个structural directive

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

Answer 2

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

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

Answer 3

[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

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>

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

ngSwitch is "Attribute Directive" OR "Structural Directive" ?

javascript

angular

dom

angular2-directives

ng-switch