Question

我的问题涉及使用angular.io样本plunkr的RC1分叉的Angular（2）。 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只会在看到/检测到更改时修改DOM，因此除非有更改，否则不会重新呈现任何内容。并且只重新渲染已更改的项目（而不是整个视图）。

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

ng即使在ngFor之外，也可以重新绘制组件上的任何事件

1 个答案: