代码之家 › 专栏 › 技术社区 › Deadpool

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

ng-switch angular2-directives dom angular javascript

0

Deadpool · 技术社区 · 7 年前

我对ngSwitch指令有点困惑——它是否是或 '结构指令'

方括号 '比如[ngStyle],[ngClass]等等(我们把它写成[ngSwitch],它指的是'属性指令')。

结构指令用' 美学技巧 '比如*ngFor,*ngIf,等等(我们把案例写为*ngSwitchCase=“…”,这意味着它是一个结构指令)。

<div [ngSwitch]="colorValue">
    <p *ngSwitchCase="red">Red</p>
    <p *ngSwitchCase="blue">Blue</p>
    <p *ngSwitchCase="green">Green</p>
</div>

5 回复 | 直到 7 年前

1

4

j3ff 5 年前

[ngSwitch] 是一个 属性指令 与…结合使用 *ngSwitchCase *ngSwitchDefault 两者都是 结构指令

这在Angular的文档中有清楚的解释。。。

NgSwitch 一 属性指令 这会改变其伴随指令的行为。

NgSwitchCase 结构指令 当绑定值等于开关值时,将其元素添加到DOM中;当绑定值不等于开关值时,将其移除。

NgSwitchDefault 当没有选定的NgSwitchCase时,将其元素添加到DOM。

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

2

0

junk 7 年前

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

改变它是儿童的长度,所以它是一个 结构指令

3

0

Sajeetharan 7 年前

它是一个 structural directive

4

0

Dinesh Ghule 7 年前

结构指令:

什么是结构指令?

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

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

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

5

0

altergothen 7 年前

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>