Question

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

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

结构指令使用' aestrick '编写，例如* ngFor，* ngIf等（并且我们将案例编写为* 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组合使用，后者是结构指令。

这在Angular的文档中已明确说明...

如果您尝试设置*ngSwitch，则会出错，因为NgSwitch是属性指令，而不是结构指令。它更改了其伴随指令的行为。它不会直接接触DOM。

绑定到*ngSwitchCase和*ngSwitchDefault。 NgSwitchCase和NgSwitchDefault伪指令是结构化伪指令，因为它们在DOM中添加或删除了元素。

https://angular.io/guide/template-syntax#the-ngswitch-directives

Answer 2

这是structural directive

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

Answer 3

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

ngSwitch 更改其孩子的长度，因此其为结构指令，

Answer 4

结构指令：

什么是结构指令？

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

与其他指令一样，您将结构指令应用于宿主元素。然后，该指令执行该主机元素及其后代的所有操作。

结构指令很容易识别。在本示例中，伪指令属性名称前带有一个星号（*）。

引用：https://angular.io/guide/structural-directives

Answer 5

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

@ j3ff：* ngSwitchCase上的（*）只是Sugar语法，它不指示指令的类型。

可以这样写很长的时间...

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

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

5 个答案: