使用服务的 Angular 多个可观察请求

Question

Demo在我的应用程序中，我使用服务在

import {Injectable} from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { TransferModel } from '../models/transfer';

@Injectable()
export class TransferService{
    constructor(){}
    private paramSource = new BehaviorSubject(new TransferModel());
    getData = this.paramSource.asObservable();
    setData(param:TransferModel) { this.paramSource.next(param)} 
}

我的问题是，当我使用组件时，它运行良好，但在页面中也会发送其他页面请求。我的意思是例如我在 Courses.component

 constructor(private transferService:TransferService,private dataService:DataService,sessionService:SessionService,private router:Router) { 
    this.transferService.getData.subscribe(x=>{
      this.transfer=x; if(!this.transfer.ExamId || this.transfer.ExamId<=0){ this.router.navigateByUrl("/home");return;}
      this.dataService.Post(URLS.url.coursePage.getCourses,{Id:this.transfer.ExamId}).subscribe(elem=>{
        this.courses=elem;
      });
    });  
 }

当我点击一门类(class)时，上面的代码获取类(class)列表，下面的函数运行和

 goToSubject(id){
    this.transfer.CourseId=id;
    this.transferService.setData(this.transfer);
    this.router.navigateByUrl("/subjects");
  }

转到主题组件。在主题组件中，我使用构造函数发送请求。

 constructor(private transferService:TransferService,private dataService:DataService,sessionService:SessionService,private router:Router) { 
     this.transferService.getData.subscribe(x=>{
       this.transfer=x; if(!this.transfer.ExamId || this.transfer.ExamId<=0){ this.router.navigateByUrl("/home"); }
       this.dataService.Post(URLS.url.subjectPage.getSubjects,{ExamId:this.transfer.ExamId,CourseId:this.transfer.CourseId}).subscribe(elem=>{
         this.subjects=elem;
       });
     });  
   } 

但这里也有另一个页面的请求调用，例如在图像中。
我需要每个页面只发送一个请求。
我怎么解决这个问题？
提前致谢

Answer 1

我假设因为 transferService.getData()返回 Subject ，您正在订阅，并且可能不会取消订阅组件 onDestroy在任何地方，这些订阅仍然有效并被调用。
您的 goToSubject()调用this.transferService.setData(this.transfer);它基本上调用了所有订阅。
您需要坚持 Subscription当你被退回 subscribe并调用unsubscribe()在 ngOnDestroy()

subscription: Subscription;
constructor(...){
    this.subscription = this.transferService.getData.subscribe(x=>{
        ...
    });
}

ngOnDestroy() {
    if(this.subscription) {
        this.subscription.unsubscribe();
        this.subscription = null;
    }
}

如果您有多个 subscribe()在您的组件上，也许您想利用某种自我订阅实现，例如 takeUntil
注意:Angular HttpClient 订阅默认是自动取消订阅的，所以你不需要调用 unsubscribe()当您调用 httpClient.get().subscribe() .对于其他一切，您需要调用 unsubscribe() .
更新:
查看您提供的 stackblitz 演示后，确认问题出在 transferService.getData()学科。然而，即使使用 ngOnDestroy()取消订阅它仍在调用，因为您有 this.transferService.setData(..)在您重定向之前，它基本上调用了 transferService.getData().subscribe(...) .
要在不进行重大重构的情况下解决此问题，您必须将其设为“仅订阅一次”或“调用订阅后立即自动取消订阅”。这让我们回到 takeUntil .
在 course.component 和 subject.component 中

constructor() {
    const subj: Subject<boolean> = new Subject<boolean>();
    this.transferService.getData
        .pipe(takeUntil(subj))
        .subscribe((result) => {
            subj.next(true);
        });
 }

更新 2:
Stackblitz demo link