3

Firebase 使用大量内部异步调用来触发更改检测，因为 Angular/Zone 猴子修补 websocketsetInterval等。即使我没有与我的应用程序交互，我也看到一连串的更改检测一直在发生，这有助于放慢速度，尤其是在移动设备上。

这种默认行为可能很有用，但是我现在使用 Firebase 的方式我可以非常严格地控制何时需要更新视图，因此 Firebase 的回调以这样一种方式使用，即无论如何都会手动进行更改检测。

我知道将更改检测器策略设置为OnPush将对此有所帮助，我正在努力，但我想从各个角度进行攻击。

我熟悉区域，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;
  }
}
4

1 回答 1

4

回想起来，这很明显，但只需在区域外实例化 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。

于 2017-01-04T04:16:52.647 回答