开发简化版NgFor
下面是自定义实现一个简化版本的NgFor指令,一般来说使用Angular默认的即可,但是在追求高性能的时候,或许你需要这样一个简化版本的指令,让你的程序运行流畅、纵享丝滑。
直接贴出代码。
import {Directive, EmbeddedViewRef, Input, DoCheck, OnChanges, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core';
export class SimpleNgForRow {
constructor(public $implicit: any, public index: number) {}
get even(): boolean { return this.index % 2 === 0; }
get odd(): boolean { return !this.even; }
}
@Directive({selector: '[simpleNgFor][simpleNgForOf]'})
export class SimpleNgFor implements DoCheck {
@Input() simpleNgForOf: any[]; // 开放属性,用于绑定数据
constructor(
private _viewContainer: ViewContainerRef, private _template: TemplateRef<SimpleNgForRow>) {}
@Input()
set ngForTemplate(value: TemplateRef<SimpleNgForRow>) {
if (value) {
this._template = value;
}
}
ngDoCheck() {
const oldLen = this._viewContainer.length;
const newLen = this.simpleNgForOf.length;