javascript - 清除排队事件的 BehaviorSubject,因为每个事件都在 Angular2 中用 Observables 解决

标签 javascript angularjs events rxjs angular2-observables

我有一个问题,我确信这完全是基于我(缺乏)对 Observables 的完整理解。

这是一个使用 rx/js 和 Observables 的 Angular2 (v4.0.3) 项目。

我有一个状态存储,它在状态服务中保存事件:

  // Observable string sources
  private currentEventStore = new BehaviorSubject<string>("");

  // Observable string streams
  public currentEvent$ = this.currentEventStore.asObservable();

  // Service message commands
  setCurrentEvent(nextEvent: string) {
    this.currentEventStore.next(nextEvent);
  }

我在我的组件中订阅了 currentEvent$ 来监听事件,然后对它们采取行动。

this.stateSvc.currentEvent$
  .subscribe(
  currentEvent => {
    this.currentEvent = currentEvent;
    if (currentEvent != '') {
      this.handleCurrentEvent(currentEvent);
    }
  });

我遇到的问题是商店正在累积所有事件并每次都返回所有事件,因此当我产生“创建”事件时,我订阅的函数会获取事件并创建记录 - 完美第一遍,但如果我生成第二个“创建”事件,我订阅的函数将获取 2 个事件,并创建 2 个记录,然后在下一个“创建”事件中创建 3 个记录,依此类推。

我需要做的是将事件从流中清除,以便 currentEvent$ 存储仅保存尚未处理的事件。

有没有办法刷新商店?或者在我的期望和实现中是否缺少某些东西?

最佳答案

通常情况下,经过数天的思考后,我会在发布问题后数小时内找到答案。

这里的问题是,每次我重新访问注册订阅者的组件时,它都会向可观察对象添加一个新的订阅者,因此在第二次访问时,有两个订阅者,每个订阅者都会触发,导致事件被处理两次。第三次回来,现在有三个订阅者,所以事件被处理了三次。

我需要做的是修改我的订阅,以便将它们分配给一个变量,然后在销毁组件时取消订阅。

所以订阅应该是这样的(注意添加'this.observeEvent =':

this.observeEvent = this.stateSvc.currentEvent$
  .subscribe(
  currentEvent => {
    this.currentEvent = currentEvent;
    if (currentEvent != '') {
      this.handleCurrentEvent(currentEvent);
    }
  });

然后我将其添加到组件中:

ngOnDestroy() {
  this.observeEvent.unsubscribe();
}

注销订阅者,这样他们就不会在每次加载此组件时累积。

我之前曾试图弄清楚如何完成此操作,但没有将 Observable 分配给实例变量,我找不到任何有效的语法来在 ngOnDestroy 方法中取消订阅。

关于javascript - 清除排队事件的 BehaviorSubject,因为每个事件都在 Angular2 中用 Observables 解决,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44009381/

相关文章:

javascript - 获取 API 未发布到 Node.js 服务器(正文为空)

javascript - jQuery mobile - 关闭历史记录面板

javascript - Angularjs 中带有标语和 Logo 的 URL 预览

JAVASCRIPT - "Code inside event"超时? o.O

ios - 手机间隙 : Calling an action when an app is opened after clicking the home button (iOS)

javascript - 为什么 GeoJSON map 在 WSG84 的 Highmaps 中看起来被拉伸(stretch)了?

JavaScript Promise 然后没有执行

javascript - 从 Controller Angularjs 调用链接函数

angularjs - 将 3rd-party Javascript 库包含到 AngularJS 应用程序中

c# - 如何在 C# 中创建自己的事件?