常見內置指令

三個經常使用的內置結構型指令 —— 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>
複製代碼

<ng-container>

Angular 的 <ng-container> 是一個分組元素，但它不會污染樣式或元素佈局，由於 Angular 壓根不會把它放進 DOM 中。