1

我的问题与使用来自 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");

    }

}
4

1 回答 1

2

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

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

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

于 2016-05-26T19:53:18.843 回答