在 Angular 中最常用的指令分为两种,它们分别是 属性型指令结构型指令

NgClass

  • 作用:添加或移除一组 CSS 类

NgStyle

  • 作用:添加或移除一组 CSS 样式

NgModel

  • 作用:双向绑定到 HTML 表单元素

NgIf

  • 作用:根据条件添加或移除 DOM
  • 语法:
  1. <div class="box" *ngIf="false">看不见我</div>

我们也可以通过类绑定样式绑定来显示或隐藏一个元素。

  1. <!-- isSpecial is true -->
  2. <div [class.hidden]="!isSpecial">Show with class</div>
  3. <div [class.hidden]="isSpecial">Hide with class</div>
  4. <div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
  5. <div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>

NgSwitch

  • 作用:类似于 JavaScript 中的 switch 语句,根据条件渲染多个选项中的一个。
  • 语法:该指令包括三个相互协作的指令:NgSwitchNgSwitchCaseNgSwitchDefault
  1. <div [ngSwitch]="currentHero.emotion">
  2. <app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
  3. <app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
  4. <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
  5. <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
  6. </div>

NgFor

  • 作用:列表渲染
  • 语法:
  1. <div *ngFor="let hero of heroes">{{hero.name}}</div>

带索引的 *ngFor

  1. <ul>
  2. <li *ngFor="let item of todos; let i = index">{{ item.title + i }}</li>
  3. </ul>

自定义指令

参考文档: