Observable 创建重复的订阅者 Angular 5答案

【问题标题】：Observable creates duplicate subscribers angular 5Observable 创建重复的订阅者 Angular 5
【发布时间】：2018-03-29 14:16:07
【问题描述】：

我已经创建了一个服务并且确实从我的组件中订阅了

deleteSelected(action) {
    let data = {
      action: action,
      filterMessages: []
    }
    data.filterMessages = this.state.messages.filter((it) => it.selected);
    if (data.filterMessages.length > 0) {
      **this.messages.next(data);**
    } else {
      this.messageDetail.next(data);
    }
  }

我的组件有订阅功能

this.activeFolderSub = this.route.params.subscribe(params => {
this.folderName = params['folder'];

 this.messageSub = this.googleService.messages.subscribe(message => {
  this.messageIndex = 0;
    const moveToTrashMessage = message.filterMessages;
    const messageIds = [];
    const labelsToAdd = [];
    const labelsToRemove = [];
    labelsToAdd.push(message.action);
    labelsToRemove.push(this.folderName);
    moveToTrashMessage.forEach((it) => { messageIds.push(it.id) });      
    if (messageIds && messageIds.length > 0) {
      this.googleService.modifyMessages(messageIds, labelsToAdd, labelsToRemove).subscribe(messages => {
        if (messages.result && this.messageIndex == 0) {              
          this.toastr.success('Conversations have been moved! ', 'Success!');
          this.getAllMessageList(this.folderName, null);
           this.messageIndex++;
        }
      });
    }
  }
  );
});

我也在 ngOnDestroy 上取消订阅此功能但是函数多次调用自身的问题，我认为是因为重复订阅。

当第一次组件自己加载时，它工作正常，但是当我更改参数值并使用不同的参数值再次打开该组件时，就会出现问题。我想我已经用重复的订阅者再次订阅了它订阅的服务主题。

【问题讨论】：

您是否在组件标记中使用了 ngFor 循环？如果是这样，有一种方法可以帮助防止额外的调用。你能发个sn-p吗？
附带说明，我看到了两个级别的嵌套订阅。嵌套订阅通常是 flatMap/mergeMap 的理想选择
没错，我期待在标记中看到它 - 但@SamHerrmann 是正确的好消息

标签： angular rxjs observable

【解决方案1】：

我认为您只是在没有清理它的情况下丢失了对该订阅的引用。在继续之前检查它是否已设置并清除它。

if (this.messageSub) {
    this.messageSub.unsubscribe();
}

this.messageSub = this.googleService.messages.subscribe(message =>

【讨论】：

Yeah chrispy，正是我做了同样的事情并且它的工作原理。
实际上 ngOnDestroy 只会在组件销毁时调用，在我的情况下组件保持不变，我必须取消订阅 this.messageSub 才能再次订阅。
这解决了我的问题，我只需要使用单独的对象来取消订阅，正如@ER.SHASHITIWARI 提到的那样，ngOnDestroy 删除了全部订阅，所以这是最好的方法

【解决方案2】：

您可以进行一系列订阅，然后在 ngOnDestroy 上取消订阅：

private subs: Subscription[] = [];

this.subs.push(
    this.messageSub = this.googleService.messages.subscribe(n => {
        //your code here
    });
}

ngOnDestroy() {
    this.subs.forEach(n => {
        n.unsubscribe();
    });
}

【讨论】：