我对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
@j3ff:*ngSwitchCase上的(*(星只是糖语法,它不指示指令的类型。
它可以这样写很长一段路。。。
<div class="course-category" [ngSwitch]="colorValue">
<ng-template [ngSwitchCase]="'RED'">
<div>
<p>Red</p>
</div>
</ng-template>
是的,这对初学者来说会有点困惑,但仍然没有那么难理解。让我解释清楚。
ngSwitch指令是一个唯一的指令,它被归类为结构,因为它可以根据条件更改(添加或删除(基于DOM的元素。
虽然它是一个结构指令,但ngSwitch的语法包括类似属性和类似结构的部分。
之所以出现差异,是因为ngSwitch被用作属性指令,而ngSwitchCase则被用作结构指令。
但它们都被归类为结构指令,因为它们都参与了条件块的构建。