常见内置指令

三个经常使用的内置结构型指令 —— 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 中。