该指令用于基于可迭代对象中的每一项创建相应的模板。每个实例化模板的上下文对象继承于外部的上下文对象,其值与可迭代对象对应项的值相关联。

NgForOf 指令语法

* 语法糖

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

template语法

<li template="ngFor let item of items; index as i; trackBy: trackByFn">...</li>

<ng-template> 元素

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<li>...</li>
</ng-template>
<!--等价于-->
<ng-template ngFor let-item="$implicit" [ngForOf]="items" let-i="index"
[ngForTrackBy]="trackByFn">
<li>...</li>
</ng-template>

NgForOf 使用示例

@Component({
selector: 'exe-app',
template: `
<ul>
<li *ngFor="let item of items; let i = index">
{{i}}. {{item}}
</li>
</ul>
`
})
export class AppComponent {
items = ['First', 'Second', 'Third'];
}

基础知识

NgForOfContext

NgForOfContext 实例用于表示 NgForOf 上下文。

// packages/common/src/directives/ng_for_of.ts
export class NgForOfContext<T> {
constructor(
public $implicit: T,
public ngForOf: NgIterable<T>,
public index: number,
public count: number) {} get first(): boolean { return this.index === ; } get last(): boolean { return this.index === this.count - ; } get even(): boolean { return this.index % === ; } get odd(): boolean { return !this.even; }
} // 定义可迭代的类型
export type NgIterable<T> = Array<T>| Iterable<T>;

Local Variables

NgForOf 提供了几个导出值,可以将其替换为局部变量:

  • $implicit: T - 表示 ngForOf 绑定的可迭代对象中的每一个独立项。

  • ngForOf: NgIterable<T> - 表示迭代表达式的值。

  • index: number - 表示当前项的索引值。

  • first: boolean - 若当前项是可迭代对象的第一项,则返回 true。

  • last: boolean - 若当前项是可迭代对象的最后一项,则返回 true。

  • even: boolean - 若当前项的索引值是偶数,则返回 true。

  • odd: boolean - 若当前项的索引值是奇数,则返回 true。

Change Propagation

当可迭代对象的值改变时,NgForOf 对 DOM 会进行相应的更改:

  • 当新增某一项,对应的模板实例将会被添加到 DOM

  • 当移除某一项,对应的模板实例将会从 DOM 中移除

  • 当对可迭代对象每一项进行重新排序,它们各自的模板将在 DOM 中重新排序

  • 否则,页面中的 DOM 元素将保持不变。

Angular 使用对象标识来跟踪可迭代对象中,每一项的插入和删除,并在 DOM 中做出相应的变化。但使用对象标识有一个问题,假设我们通过服务端获取可迭代对象,当重新调用服务端接口获取新数据时,尽管服务端返回的数据没有变化,但它将产生一个新的对象。此时,Angular 将完全销毁可迭代对象相关的 DOM 元素,然后重新创建对应的 DOM 元素。这是一个很昂贵 (影响性能) 的操作,如果可能的话应该尽量避免。

因此,Angular 提供了 trackBy 选项,让我们能够自定义跟踪算法。 trackBy 选项需绑定到一个包含 indexitem 两个参数的函数对象。若设定了 trackBy 选项,Angular 将基于函数的返回值来跟踪变化。

IterableDiffers

用于跟踪可迭代对象变化差异。

TrackByFunction

用于定义 trackBy 绑定函数的类型:

// packages/core/src/change_detection/differs/iterable_differs.ts
export interface TrackByFunction<T> { (index: number, item: T): any; }

SimpleChanges

用于表示变化对象,对象的 keys 是变化的属性名,而对应的属性值是 SimpleChange 对象。

// packages/core/src/metadata/lifecycle_hooks.ts
export interface SimpleChanges { [propName: string]: SimpleChange; }

SimpleChange

用于表示从旧值到新值的基本变化。

// packages/core/src/change_detection/change_detection_util.ts
export class SimpleChange {
constructor(
public previousValue: any,
public currentValue: any,
public firstChange: boolean) {} // 验证是否是首次变化
isFirstChange(): boolean { return this.firstChange; }
}

NgForOf 源码分析

NgForOf 指令定义

@Directive({
selector: '[ngFor][ngForOf]'
})

NgForOf 类私有属性及构造函数

// packages/common/src/directives/ng_for_of.ts
export class NgForOf<T> implements DoCheck, OnChanges {
private _differ: IterableDiffer<T>|null = null;
private _trackByFn: TrackByFunction<T>; constructor(
private _viewContainer: ViewContainerRef,
private _template: TemplateRef<NgForOfContext<T>>,
private _differs: IterableDiffers) {}
}

NgForOf 类输入属性

// <ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
@Input() ngForOf: NgIterable<T>; // 表示ngForOf属性,绑定的可迭代对象
@Input()
set ngForTrackBy(fn: TrackByFunction<T>) {
// 在开发模式下,若ngForTrackBy属性绑定的对象不是函数类型,则提示用户。
if (isDevMode() && fn != null && typeof fn !== 'function') {
// TODO(vicb): use a log service once there is a public one available
if (<any>console && <any>console.warn) {
console.warn(
`trackBy must be a function, but received ${JSON.stringify(fn)}. ` +
`See https://angular.io/docs/ts/latest/api/common/index/NgFor-
directive.html#!#change-propagation for more information.`);
}
}
this._trackByFn = fn;
} @Input()
set ngForTemplate(value: TemplateRef<NgForOfContext<T>>) { // 表示ngFor对应的模板对象
if (value) {
this._template = value;
}
}

NgForOf 指令生命周期

export class NgForOf<T> implements DoCheck, OnChanges {
// 当输入属性发生变化,获取ngForOf绑定的可迭代对象的当前值,若_differ对象未创建,则基于ngForTrackBy
// 函数创建IterableDiffer对象。
ngOnChanges(changes: SimpleChanges): void {
if ('ngForOf' in changes) {
// React on ngForOf changes only once all inputs have been initialized
const value = changes['ngForOf'].currentValue;
if (!this._differ && value) {
try {
this._differ = this._differs.find(value).create(this.ngForTrackBy);
} catch (e) {
throw new Error(
`Cannot find a differ supporting object '${value}' of type
'${getTypeNameForDebugging(value)}'. NgFor only supports binding to
Iterables such as Arrays.`);
}
}
}
} // 调用IterableDiffer对象的diff()方法,计算可迭代对象变化的差异值,若发生变化则响应对应的变化。
ngDoCheck(): void {
if (this._differ) {
const changes = this._differ.diff(this.ngForOf);
if (changes) this._applyChanges(changes);
}
}
}

通过源码我们发现在 ngDoCheck() 方法中,会调用 IterableDiffer 对象的 diff() 方法计算变化差异。该方法返回 IterableChanges 对象。现在我们来分析一下 IterableChanges 对象。

IterableChanges

IterableChanges 对象用于表示从上次调用 diff() 方法后,可迭代对象发生的变化。IterableChanges 接口定义如下:

// packages/core/src/change_detection/differs/iterable_differs.ts
export interface IterableChanges<V> {
/** 迭代所有变化的项,IterableChangeRecord将包含每一项的变化信息 */
forEachItem(fn: (record: IterableChangeRecord<V>) => void): void; /** 对原始的可迭代对象应用执行对应的操作,从而产生新的可迭代对象 */
forEachOperation(fn: (record: IterableChangeRecord<V>,
previousIndex: number, currentIndex: number) => void): void; /** 迭代原始Iterable的顺序的变化,显示原始项目移动的位置。*/
forEachPreviousItem(fn: (record: IterableChangeRecord<V>) => void): void; /** 迭代所有新增的项 */
forEachAddedItem(fn: (record: IterableChangeRecord<V>) => void): void; /** 迭代已移动的项 */
forEachMovedItem(fn: (record: IterableChangeRecord<V>) => void): void; /** 迭代已移除的项 */
forEachRemovedItem(fn: (record: IterableChangeRecord<V>) => void): void; /** 迭代所有基于trackByFn函数标识的变化项 */
forEachIdentityChange(fn: (record: IterableChangeRecord<V>) => void): void;
}

我们注意到每个迭代函数 fn 的输入参数类型是 IterableChangeRecord 对象。IterableChangeRecord 接口定义如下:

// packages/core/src/change_detection/differs/iterable_differs.ts
export interface IterableChangeRecord<V> {
/** Current index of the item in `Iterable` or null if removed. */
readonly currentIndex: number|null; /** Previous index of the item in `Iterable` or null if added. */
readonly previousIndex: number|null; /** The item. */
readonly item: V; /** Track by identity as computed by the `trackByFn`. */
readonly trackById: any;
}

分析完 diff() 方法返回IterableChanges 对象,接下来我们来重点分析一下 _applyChanges 方法。

NgForOf 类私有方法

在介绍 NgForOf 类私有方法前,我们需要先介绍一下 RecordViewTuple 类,该类用于记录视图的变化。 RecordViewTuple 类的定义如下:

class RecordViewTuple<T> {
constructor(public record: any,
public view: EmbeddedViewRef<NgForOfContext<T>>) {}
}

介绍完 RecordViewTuple 类,我们马上来看一下 NgForOf 类中的私有方法:

private _applyChanges(changes: IterableChanges<T>) {
const insertTuples: RecordViewTuple<T>[] = [];
// 基于IterableChanges对象,执行视图更新操作:如新增、删除或移动操作。
changes.forEachOperation(
(item: IterableChangeRecord<any>,
adjustedPreviousIndex: number,
currentIndex: number) => {
// 对于新增的项,previousIndex的值为null
if (item.previousIndex == null) {
/**
* export class NgForOfContext<T> {
* constructor(
* public $implicit: T,
* public ngForOf: NgIterable<T>,
* public index: number,
* public count: number) {}
* }
*/
// 基于TemplateRef对象及NgForOfContext上下文创建内嵌视图
const view = this._viewContainer.createEmbeddedView(
this._template, new NgForOfContext<T>(null !, this.ngForOf, -, -),
currentIndex);
const tuple = new RecordViewTuple<T>(item, view);
insertTuples.push(tuple);
} else if (currentIndex == null) { // 对于已移除的项,currentIndex的值为null
// 根据之前的索引值,在视图容器中移除对应的视图。
this._viewContainer.remove(adjustedPreviousIndex);
} else {
// 执行视图的移动操作:先根据之前索引值获取对应的视图对象,然后将该视图移动到currentIndex
// 指定的位置上。同时创建一个新的RecordViewTuple对象,用于记录该变化。
const view = this._viewContainer.get(adjustedPreviousIndex) !;
this._viewContainer.move(view, currentIndex);
const tuple = new RecordViewTuple(item,
<EmbeddedViewRef<NgForOfContext<T>>>view);
insertTuples.push(tuple);
}
}); // 遍历视图变化记录数组(记录视图新增与移动操作),更新每一项中EmbeddedViewRef对象,context属性对应
// 的上下文对象中$implicit属性的值为新的值。
for (let i = ; i < insertTuples.length; i++) {
this._perViewChange(insertTuples[i].view, insertTuples[i].record);
} // 遍历视图容器中的视图,设置视图上下文对象中的`index`和`count`的值。
for (let i = , ilen = this._viewContainer.length; i < ilen; i++) {
const viewRef = <EmbeddedViewRef<NgForOfContext<T>>>this._viewContainer.get(i);
viewRef.context.index = i;
viewRef.context.count = ilen;
} // 迭代所有基于trackByFn函数标识的变化项,更新每一项中EmbeddedViewRef对象,context属性对应
// 的上下文对象中$implicit属性的值为新的值。
changes.forEachIdentityChange((record: any) => {
const viewRef =
<EmbeddedViewRef<NgForOfContext<T>>>this._viewContainer.get(record.currentIndex);
viewRef.context.$implicit = record.item;
});
} private _perViewChange(
view: EmbeddedViewRef<NgForOfContext<T>>,
record: IterableChangeRecord<any>) {
view.context.$implicit = record.item;
}

NgForOf 指令的源码已经分析完了,该指令的核心就是如何高效的跟踪可迭代对象的变化,然后尽可能复用已有的 DOM 元素,来提高应用的性能。后面如果有时间的话,会整理专门的文章来分析 IterableDiffer 对象 diff() 算法具体实现。

在调用 ViewContainerRef 对象的 createEmbeddedView() 方法创建视图对象时,除了指定 TemplateRef 对象,我们还可以设置 TemplateRef 对象关联的上下文对象及视图的插入位置。其中上下文对象,用于作为解析模板绑定表达式的上下文。最后我们再来回顾一下以下语法,是不是感觉清晰很多。

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<li>...</li>
</ng-template>
<!--等价于-->
<ng-template ngFor let-item="$implicit" [ngForOf]="items" let-i="index"
[ngForTrackBy]="trackByFn">
<li>...</li>
</ng-template>

AngularX 指令(ngForof)(转载)的更多相关文章

  1. Linux常用指令【转载】

    [收藏]Linux常用指令[转载] $ 命令行提示符 粗体表示命令 斜体表示参数 filename, file1, file2 都是文件名.有时文件名有后缀,比如file.zip command 命令 ...

  2. Linux常见操作指令(转载)

    Linux,免费开源,多用户多任务系统.基于Linux有多个版本的衍生.RedHat.Ubuntu.Debian 安装VMware或VirtualBox虚拟机.具体安装步骤,找百度. 再安装Ubunt ...

  3. SQL-.db 数据库查看常用指令(转载)

    一下内容转载自http://blog.sina.com.cn/s/blog_74dfa9f401017s69.html 简介sqlite3一款主要用于嵌入式的轻量级数据库,本文旨在为熟悉sqlite3 ...

  4. 在SQL Server中用好模糊查询指令LIKE (转载)

    like在sql中的使用:在SQL Server中用好模糊查询指令LIKE:查询是SQL Server中重要的功能,而在查询中将Like用上,可以搜索到一些意想不到的结果和效果,like的神奇 一.一 ...

  5. Appium+python自动化11-adb必知必会的几个指令【转载】

    前言 学android测试,adb是必学的,有几个常用的指令需要熟练掌握 一.检查设备 1.如何检查手机(或模拟器)是连上电脑的,在cmd输入: >adb devices

  6. ARM汇编中ldr伪指令和ldr指令(转载)

    转自:http://blog.csdn.net/ce123_zhouwei/article/details/7182756 ARM是RISC结构,数据从内存到CPU之间的移动只能通过L/S指令来完成, ...

  7. samba - linux客户端访问samba服务器的指令(转载)

    转自:http://linux.sheup.com/linux/linux5303.htm linux客户端访问samba服务器的指令2004-04-23 15:18 pm来自:Linux文档现载:W ...

  8. 【嵌入式开发】 ARM 汇编 (指令分类 | 伪指令 | 协处理器访问指令)

    作者 : 韩曙亮 博客地址 : http://blog.csdn.net/shulianghan/article/details/42408137 转载请著名出处 本博客相关文档下载 :  -- AR ...

  9. JVM 内存初学 (堆(heap)、栈(stack)和方法区(method) )(转载)

    想想面试的时候很多会问jvm这方面的问题虽然还是菜鸟不太能用到现在但是还是了解一下, 找资料的时候看见个大佬写的很好转载到这方便以后自己复习和给大佬做宣传 以下为大佬的博客原文: 这两天看了一下深入浅 ...

随机推荐

  1. Vim练级攻略(转)

    转自平凡的世界:http://www.ccvita.com/ 前言今天看到这篇文章,共鸣点非常多.它把Vim使用分为4个级别,目前我自己是熟练运用前面三级的命令,在培养习惯使用第四级.完全就是我这一年 ...

  2. 03_zookeeper伪集群安装

    一句话说明白:在1台机器上模拟多台机器,对外提供服务 在理解zookeeper集群安装方法的基础上,本文描述如何将1个机器模拟为3个节点的zookeeper集群,建议先参考阅读本文的前一期 zooke ...

  3. spring boot2.1读取 apollo 配置中心1

    第一篇:搭建apollo配置中心 为什么选择apollo,我做了一些对比:   Diamond Disconf Apollo Spring Cloud Config 数据持久性 mysql mysql ...

  4. 面试代码基础(一)从strstr说起

    对于写程序要注意:要能在面试官的提示下把代码写出来(把思想实现的能力)!还要注意边界检查!递归找到出口! 开场来个简单字符串匹配 int strstr(char* target,char* sourc ...

  5. Devops 到底是什么?

    Devops 到底是什么? 过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOps.DevOps就是开发(Development)和运维(Operations ...

  6. oracle 11g安装过程中问题:移动bin\oralbac11.dll 到bin\oralbac11.dll.dbl出错

    解决方法: 直接找到oralbac11.dll.dbl这个文件,将其删除即可.   http://blog.sina.com.cn/s/blog_51beaf0e0101000v.html

  7. 自学数据库建模工具--powerdesigner

    网上找了个英文的,版本感觉有点旧12的,但还好英语还行,摸索了一下功能,大概截了几张图,感觉优点:1总共有物理模型pdm,概念模型cdm,业务模型bdm 可以互转,逻辑清晰   2表与表之前的联系,建 ...

  8. 【BZOJ1061】【NOI2008】志愿者招募

    [BZOJ1061][NOI2008]志愿者招募 题面 BZOJ 题解 我们设每类志愿者分别招募了\(B[i]\)个 那么,我们可以得到一系列的方程 \[\sum_{S[i]\leq x\leq T[ ...

  9. 整合Struts2与Spring

    一.需要的JAR文件为:Spring和Struts2框架本身需要的JAR文件以及他们所依赖的JAR文件

  10. Vue打包上线部署

    一.路径问题 1.脚手架+webpack打包通过npm run build,但是后台tomcat部署上线的时候,会衍生出一些问题,比如,路径问题(因为在项目中,我们使用了绝对路径,这里必须要使用相对路 ...