如何取消订阅角度参数更改的所有订阅答案

【问题标题】：How to unsubscribe to all the subscriptions on param change in angular如何取消订阅角度参数更改的所有订阅
【发布时间】：2020-06-03 10:03:48
【问题描述】：

我正在开发可以显示工作详细信息的页面，为此我使用 NGRX 存储来调度操作并订阅它以显示如下所示的数据

this.store.dispatch(new LoadJobDetails(jobIdsObject));
this.subs.add(
    this.store.pipe(select(state => state.chatbotStoreData.jobDetailsObject)).subscribe(
      (data) => {
          if(data) {
            this.jobDetails = data;
            this.getJobHomeSteps();
          }
      }
    )
);

getJobHomeSteps() {
this.store.dispatch(new LoadJobStepsDetails(this.jobId));
this.subs.add(
    this.store.pipe(select(state => state.chatbotStoreData.jobHomeStepsDetailsObject)).subscribe(
      (data) => {
          if(data) {
            this.jobStepsDetails = data;
          }
      }
    )
);
}

在 ngondestroy 中，我将取消订阅所有订阅，如下所示，

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

这工作正常，但我有带有作业列表的 sidenav 菜单，单击每个作业时，作业详细信息页面会更新单击的作业详细信息。在这里，单击每个作业时，都会发生多次初始订阅，并且调度 API 会多次调用，因为我无法取消订阅以前的作业订阅。

如何在参数更改时取消订阅该特定组件中的所有订阅，或者我可以通过任何其他方式解决此问题。任何帮助将不胜感激，谢谢！！！

【问题讨论】：

您没有在问题中显示您的“参数更改”代码。我认为switchMap 可以帮助你。当外部 Observable 发出时，它会自动取消订阅前一个内部 Observable。 paramsChange.pipe( switchMap(p => innerObservable) )
嗨 @fridoo 我的 URL 看起来像这样 'localhost:4200/#/job/1712' 并且每个工作的工作 ID 都会改变。在参数更改时，我正在调用方法来调度操作。我的代码如下所示， this.activatedRoute.params.subscribe( params => { this.initiateJobHomeData(); } )
请使用必要的代码更新您的问题。 `this.initiateJobHomeData()` 看起来如何？正如我所说，你应该从你的参数switchMap 到所需的 Observable：this.activatedRoute.params.pipe(switchMap(params => this.initiateJobHomeDataAsObservable() )).subscribe(..)
嗨@fridoo 里面的参数订阅我叫 this.initiateJobHomeData();方法和在该方法中，我正在调度所有操作并订阅商店，如问题中所示。
如果你想在参数更改时取消订阅 Observable，你应该 switchMap 到这个 Observable。您必须重组您的代码并创建一个返回 Observable 的方法（例如，返回 this.store.pipe(select(state => state.chatbotStoreData.jobDetailsObject)) 并且不订阅）然后在 switchMap 中调用此方法，如上面我的 cmets 所示，并在 ngOnInit 中订阅。

标签： angular rxjs angular8 rxjs-subscriptions

【解决方案1】：

 getSearchResultsObservable(control: FormControl): Observable<any> {
    return control.valueChanges.pipe(
      debounceTime(100),
      distinctUntilChanged(),
      switchMap(data => this.getSearchResults(control.value))
    );
  }

【讨论】：

嗨@sarthak Agrawal 如何在路由器参数更改中使用装饰器？
表单控件的概念是从哪里来的？？
这是我的代码，你必须在参数更改时做同样的事情
不行，你的代码只会给出最新的查询参数
这可能会回答这个问题。但是，仅代码的答案不如记录代码或详细解释为什么此代码是问题的解决方案的答案有用。