常见内置指令

最新推荐文章于 2024-04-10 23:30:44 发布

转载最新推荐文章于 2024-04-10 23:30:44 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cde764051882525f1696800

文章标签：

#javascript #ViewUI

博客介绍了Angular三个常用的内置结构型指令——NgIf、NgFor和NgSwitch。提到指令类名和属性名的拼写形式，星号前缀是简化语法的“语法糖”，还说明了NgIf移除而非隐藏的原因，以及NgFor和NgSwitch的相关特性。

三个常用的内置结构型指令 —— NgIf、NgFor和NgSwitch 指令的类名拼写成大驼峰形式（NgIf），而它的属性名则拼写成小驼峰形式（ngIf）

星号（*）前缀

<div *ngIf="hero" class="name">{{hero.name}}</div>
复制代码

星号是一个用来简化更复杂语法的“语法糖”。从内部实现来说，Angular 把 *ngIf 属性翻译成一个 <ng-template> 元素, 并用它来包裹宿主元素

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>
复制代码

NgIf

为什么移除而不是隐藏？

对于简单的段落，隐藏和移除之间的差异影响不大，但对于资源占用较多的组件是不一样的。当隐藏掉一个元素时，组件的行为还在继续 —— 它仍然附加在它所属的 DOM 元素上，它也仍在监听事件。Angular 会继续检查哪些能影响数据绑定的变更。组件原本要做的那些事情仍在继续。
这一点对于Vue或者React都是同样适用的

NgFor

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>
复制代码

Angular 不允许*ngFor 和 *ngIf 放在同一个宿主元素上

NgSwitch

<div [ngSwitch]="hero?.emotion">
  <ng-template [ngSwitchCase]="'happy'">
    <app-happy-hero [hero]="hero"></app-happy-hero>
  </ng-template>
  <ng-template [ngSwitchCase]="'sad'">
    <app-sad-hero [hero]="hero"></app-sad-hero>
  </ng-template>
  <ng-template [ngSwitchCase]="'confused'">
    <app-confused-hero [hero]="hero"></app-confused-hero>
  </ng-template >
  <ng-template ngSwitchDefault>
    <app-unknown-hero [hero]="hero"></app-unknown-hero>
  </ng-template>
</div>
复制代码