2

我在离子应用程序中使用 Angular 2 并结合 PouchDB 作为数据库。出于性能原因，我选择在任何地方使用 OnPush+Async 管道。我现在偶然发现了一个事实，即如果 pouchdb 事件导致更改，它不会反映在模板中：

我有一个数据库类，它只计算数据库更改的数量：

@Injectable()
export class Database {
  foo$ = new BehaviorSubject(0);

  (...)

  sync(url, options) {
    this.pouchdb.sync(url, options)
      .on('change', this.changed.bind(this));
    this.foo$.subscribe(count => console.debug('the count is', count));
  }

  changed() {
    this.foo$.next(this.foo$.value + 1);
  }
}

在模板中，我使用异步管道显示数字：

{{ db.foo$|async }}

但这不起作用：数字卡住了，即使有数据库更改（控制台输出显示数据库更改的次数）。但是，如果我点击某个东西，数字会突然跳到正确的值。

我觉得这很令人惊讶，因为我认为异步管道通过订阅一个可观察对象来工作，一旦这个可观察对象发出一些东西，模板内的值就会更新。显然，这在这里不起作用，因为我知道 observable 发出了一些东西（正如我从控制台输出中看到的那样），但更改并未反映在模板中。

你知道是什么导致了这种行为/如何改变它？

附加信息

为了确定是 pouchDB <> Angular 的组合导致了问题，我使用了这个函数

sync(url, options) {
  window.setInterval(this.changed.bind(this), 1000);
}

这会导致模板内的值每秒正确更新。

编辑

我发现这个虚拟代码

window.setInterval(() => {}, 1000);

解决了这个问题，因为它可能每秒触发一次更改检测。我不明白的是，为什么异步管道没有检测到更改？

4

1 回答 1

4

TL；DR：代码在角度区域之外运行，因此在下一个变化检测周期之前，角度不会处理变化。

使用 chrome 开发工具，在更改的调用中放置一个断点。请注意，如果您发现 pouchdb 调用和 setInterval 之间的调用堆栈存在差异。具体来说，setInterval 可能有一些围绕调用的区域绑定，而 pouchdb 调用没有。如果是这样，您可以：

  • 查看初始化顺序 -参见这个 SO - 或者是否可以对 pouchdb 进行猴子修补以调用角度区域内的承诺。
  • 注入private zone: NgZone数据库构造函数并this.zone.run(() => this.foo$.next(this.foo$.value + 1));在 changed() 内部使用以保证您进入角度区域。

如果所有其他方法都失败了，请屈服并手动标记更改检测（使用 ChangeDetectionRef）。然而，由于这必须在使用 db 的组件中完成，这绝对是一个可怕的抽象泄漏。

享受。让我们知道你发现了什么。

于 2017-01-23T08:02:02.513 回答