ngSwitch 是"Attribute Directive"还是"Structural Directive"?



我对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的指令类型吗?

[ngSwitch]是一个属性指令,与同为结构指令的*ngSwitchCase*ngSwitchDefault组合使用

Angular的文档中对此有明确的解释。。。

  • NgSwitch——一个属性指令,用于更改其伴随指令的行为
  • NgSwitchCase-结构指令,当其绑定值等于开关值时将其元素添加到DOM,当其不等于开关值则删除其绑定值
  • NgSwitchDefault-结构指令,在没有选择NgSwitchCase时将其元素添加到DOM

https://angular.io/guide/built-in-directives#switching-ngswitch 案例

据我所知,"structural指令">更改dom的结构属性指令更改dom的属性,如颜色、背景等

ngSwitch更改它的子级长度,因此它是一个结构指令

它是一个结构指令

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

结构指令:

什么是结构指令

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

与其他指令一样,可以将结构指令应用于主体图元。然后,该指令对宿主元素及其后代执行它应该执行的任何操作。

结构指令易于识别。指令属性名称前面有一个星号(*(,如本例所示。

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

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指令是一个唯一的指令,它被归类为结构,因为它可以根据条件更改(添加或删除(基于DOM的元素。

虽然它是一个结构指令,但ngSwitch的语法包括类似属性和类似结构的部分。

之所以出现差异,是因为ngSwitch被用作属性指令,而ngSwitchCase则被用作结构指令

但它们都被归类为结构指令,因为它们都参与了条件块的构建。

相关内容

  • 没有找到相关文章

最新更新