angular - 如何防止 Firebase 在 Angular 2 中重复触发变更检测？

Question

由于 Angular/Zone monkey-patching websockets 和 setInterval 等，Firebase 使用大量内部异步调用触发变化检测。即使我没有与我的应用交互，我也会看到级联变化检测一直在发生，这有助于减慢速度，尤其是在移动设备上。

此默认行为可能很有用，但我现在使用 Firebase 的方式可以非常严格地控制何时需要更新 View ，因此使用来自 Firebase 的回调以手动进行更改检测无论如何。

我知道将更改检测器策略设置为 OnPush 会有所帮助，我正在努力，但我想从各个 Angular 解决这个问题。

我熟悉区域的 runOutsideAngular 但现在不确定是否要在这里应用它，因为所有异步调用都发生在 Firebase 模块内。

我怎样才能让 Firebase 在 Angular 区域之外开展所有业务？

---

编辑:显示问题的示例代码:

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

@Component({
  selector: 'test-component',
  template: 'hello world'
})
export class TestComponent {
  ref: Firebase;

  constructor() {
    this.ref = new Firebase('<firebase URL>');
  }

  ngDoCheck() {
    console.log('Check the stack - this is being called continually via async functions used internally by Firebase.');
    debugger;
  }
}

Answer 1

回想起来这很明显，但只需在区域外实例化 Firebase 引用就可以了。例如:

import {Injectable, NgZone} from '@angular/core';

// ...

@Injectable()
export class DataService {
  ref: Firebase;

  // ...

  constructor(
    private zone: NgZone
    // ...
  ) {
    // Instantiate Firebase ref outside the zone to prevent its continual internal operations from triggering change detection
    this.zone.runOutsideAngular(() => {
      this.ref = new Firebase('<firebase URL>');
    });

    this.ref.on('value', snapshot => {
      // Change detection will NOT automatically be triggered after this callback
    });
  }
}

通过在我的组件的 ngDoCheck 中放置断点，我能够将所有更改检测周期追溯到我实例化 Firebase 引用的那一行，这暗示在区域外运行它会阻止它们.

请注意，如果您选择这条路线，您必须确保在必要时触发更改检测。参见 https://stackoverflow.com/a/34829089/458614例如。