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

Question

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

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

点击时的日志结果：

按钮
绘图
绘图

您可以通过查看控制台日志在 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 只会在 sees/detects 发生变化时修改 DOM，因此除非发生变化，否则不会重新呈现任何内容。并且仅重新呈现更改的项目（而不是整个视图）。

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

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

ngFor redraws on any event on the component even if outside the ngFor

angular

ngfor