Angular - 自定义结构型指令

Angular的组件和指令的功能强大，使用方式也很多样。有没有想过自定义一个*ngFor？假如项目中有一个列表数据很多，一次性渲染会消耗极大的性能，甚至会造成浏览器卡死的情况。这个时候若是*ngFor支持分布渲染就能很好的解决这个问题。事实上我们可以自定义一个结构指令来实现这个功能。

结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf 和 *ngFor。

首先了解 * 号语法

* 号是语法糖。我们以 *ngIf 指令为例：

<div *ngIf="trigger">Hello</div>

这一段代码在编译时会被解析为：

<ng-template [ngIf]="trigger">
    <div>Hello</div>
</ng-template>

实际上做了两件事：

1. Angular 把 host (宿主元素) 包装在 ng-template 标签里面
2. Angular 将 *ngIf 转换为属性绑定 - [ngIf]

仿照*ngIf的功能，创建自定义结构型指令：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[customNgIf]'})
export class CustomNgIfDirective {

    constructor(private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef) { }

    @Input() set customNgIf(condition: boolean) {
        if (condition) {
            this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
            this.viewContainer.clear();
        }
    }
}

我们可以按照以下方式使用我们的指令： 

<div *customNgIf="condition">Hi</div>

有一些关键点需要介绍一下：

TemplateRef

如名字所示，TemplateRef 用于表示模板的引用，指的是ng-templatehe和包装在里面的宿主元素

<ng-template [customNgIf]="condition">
    <div>Hi</div>
</ng-template>

ViewContainerRef

正如上面介绍的，模板中包含了 DOM 元素，但如果要显示模板中定义的元素，我们就需要定义一个插入模板中元素的地方。在 Angular 中，这个地方被称作容器，而 ViewContainerRef 用于表示容器的引用。那什么元素会作为容器呢？

Angular 将使用 comment 元素替换 ng-template 元素，作为视图容器。

 View:

<div>
    <h2 *customNgIf="condition">Hello {{name}}</h2>
    <button (click)="condition = !condition">Click</button>
</div>

Component:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.less']
})
export class AppComponent {
    name = 'Custom Directive';
    condition = true;
}

ViewContainerRef 对象提供了 createEmbeddedView() 方法，该方法接收 TemplateRef 对象作为参数，并将模板中的内容作为容器 (comment 元素) 的兄弟元素，插入到页面中。

仿照*ngFor创建一个可以延迟加载列表的结构型指令

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[customNgFor]'})
export class CustomNgForDirective {

    @Input() itemRenderAtOnce = 1;
    @Input() renderInterval = 1500;
    @Input() maxSupportItems = 1000;
    @Input()
    set customNgForOf(list: any[]) {
        this.list = list;
        if (this.initialized) {
            this.viewContainerRef.clear();
            this.buildListProgressively();
        }
    }

    list: any[] = [];
    buildListInterval: ReturnType<typeof setInterval>;
    private initialized = false;

    constructor(private viewContainerRef: ViewContainerRef, private templateRef: TemplateRef<any>) {
        //
    }

    ngOnInit() {
        this.initialized = true;
        if (this.list && this.list.length > 0) {
            this.buildListProgressively();
        }
    }

    buildListProgressively() {
        const length = this.list?.length || 0;
        let currentIndex = 0;

        if (this.buildListInterval) {
            clearInterval(this.buildListInterval);
        }

        this.buildListInterval = setInterval(() => {
            const nextIndex = currentIndex + this.itemRenderAtOnce - 1;

            for (let n = currentIndex; n <= nextIndex; n++) {
                if (n >= length || n >= this.maxSupportItems) {
                    clearInterval(this.buildListInterval);
                    break;
                }
                this.viewContainerRef.createEmbeddedView(this.templateRef, {
                    $implicit: this.list[n],
                    index: n
                });
            }

            currentIndex += this.itemRenderAtOnce;
        }, this.renderInterval);
    }
}

View：

<div>
    <div *customNgFor="let item of list">{{item}}</div>
</div>

这里有一个关键点需要介绍：

$implicit

我们在调用 createEmbeddedView() 方法时，设置了更多的参数 {$implicit: this.list[n], index: n} 。Angular 为我们提供了 let 模板语法，允许在生成上下文时定义和传递上下文。配合{method name}Of，这将允许我们使用 *customNgFor="let item of list" 来解析列表数据。$implicit类似于函数中的arguments，因为我们不知道用户在使用这个指令时，会为变量赋上什么名字