[Angular8]之 *ngFor 解析

*ngFor 是 Angular 中的结构型指令，用来遍历数据并动态的添加 DOM 元素，它由两部分组成，星号( * )和指令的属性名( ngFor )

一、星号( * )前缀

星号是一个用来简化更复杂语法的“语法糖”，举个例子(以下代码为例)，当 showInfo 为 true 时显示一段信息

<div *ngIf="showInfo">{{message}}</div>

Angular 会把 *ngIf 属性翻译成一个 <ng-template> 元素并用它来包裹宿主元素 <div>

<ng-template [ngIf]="showInfo">
  <div>{{message}}</div>
</ng-template>

• *ngIf 指令被移到了 <ng-template> 元素上，并以属性绑定的形式绑定
• <div> 上的其余部分，移到了内部的 <ng-template> 元素上

二、*ngFor 如何使用

举个例子

<div *ngFor="let color of colors let i=index let odd=odd">
  {{odd}}
  {{i}}
  {{color}}
</div>

colors = [ 'red', 'blue', 'yellow', 'green' ];

效果图如下：

ngFor.png

Angular 会把 *ngFor 用同样的方式把星号（*）语法的 template 属性转换成 <ng-template> 元素

<ng-template ngFor let-color [ngForOf]="colors" let-i="index" let-odd="odd">
  <div>{{odd}} {{i}} {{color}}</div>
</ng-template>

• 解析器会把 let color、let i 和 let odd 翻译成命名变量 let-hero、let-i 和 let-odd
• 微语法解析器接收of，会将它的首字母大写(Of)，然后加上属性的指令名(ngFor)前缀，它最终生成的名字是 ngFor 的输入属性(colors)
• NgFor 指令在列表上循环，每个循环中都会设置和重置它自己的上下文对象上的属性。 这些属性包括 index 和 odd 以及一个特殊的属性名 $implicit(隐式变量)
• Angular 将 let-color 设置为此上下文中 $implicit 属性的值， 它是由 NgFor 用当前迭代中的 colors 初始化的