ngFor 重绘组件上的任何事件，即使在 ngFor 之外

Question

我的问题与使用来自 angular.io 示例 plunkr 的 RC1 叉的 Angular(2) 相关。 ngFor 模板中的数据绑定函数运行起来，就好像在 ngFor 之外的任何事件上发现更改检测为真一样。在我的示例中，单击 ngFor 外部的按钮。

我尝试过使用和不使用 trackBy 功能（尽管目前它的文档很差，所以不确定我是否正确使用它）；我无法弄清楚如何确保每个操作都不会导致重绘 ngFor，因为这可能会非常昂贵。

点击后的日志结果：

1. 按钮
2. 绘图
3. 绘图

您可以通过查看控制台日志在plunkr 上实时查看问题：

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

@Component({
  selector: 'my-app',
  template: `
      <button (click)="clickOustideFunction()" >hi</button>
      <h1 *ngFor="let d of data;trackBy:a">
        My First Angular 2 App{{drawingForFunction()}}
      </h1>`
})
export class AppComponent { 
    data= [{"a":1}, {"a":2}];

    clickOustideFunction(): void {
        console.log("button");
    }

    drawingForFunction(): void {
        console.log("drawing");

    }

}

Answer 1

默认情况下，所有模板绑定都会在每个事件之后检查更改。通常一个 NgFor 循环会有像{{data.a}} 这样的绑定，并且每次更改检测运行时这些绑定都会被脏检查。如果您有一个函数，例如 {{drawingForFunction()}}，则每次更改检测运行时也会评估这些函数。

Angular 只有在看到/检测到更改时才会修改 DOM，因此除非有更改，否则不会重新渲染。并且仅重新渲染更改的项目（而不是整个视图）。

您也许可以使用OnPush 更改检测策略来减少检查组件更改的频率。