Angular Observable Service被多次调用

如何解决Angular Observable Service被多次调用

我有一个服务，该服务的返回方法可观察。我有一个组件，该组件在加载时会订阅该可观察的对象。我的服务中有一个console.log，可以在每次调用时进行记录。 当我运行应用程序并查看控制台窗口时，我看到了3个记录值实例。这是为什么？我只订阅了一次可观察的服务。

与这个简单的示例相比，实际上我有一个更广泛的问题，在这个简单的示例中，我注意到当我对我的服务有多个订阅时，我得到了对函数和服务的更多重复调用。考虑到我的假设是为什么使用rxjs和subject的目的是要具有某种基本形式的状态管理，而又要避免检索未更改的数据，所以为什么会发生这种情况。

服务：

export class ResultService {

  protected id;
  private results$ = new Subject<any>();
  
  constructor(
    private dataService: DataService,) { }

  getResults(id): Observable<any> {
    console.log('get result called in ResultService');
    this.dataService.getResults(id)
      .subscribe(res => {
        console.log('the value of res in ResultService constructor');
        this.results$.next(res);
      })
    return this.results$.asObservable();
  }
}

结果组件

private subscription$;
@Input() id;

  constructor(
       this.subscription$ = this.resultService.getResults(this.competitionId);
       this.fetchResults(this.competitionId);
  ) { }

  ngOnInit() {
    this.fetchResults(this.id);
  }
  fetchResults(id){
    this.resultService.getResults(this.id)
      .subscribe((data) => 
      {
        data.forEach(resultElement => {
           //do something
        });
        this.resultList = data;
      })
  }
  ngOnChanges() {
    this.fetchResults(this.id);
  }

  ngOnDestroy() {
    this.subscription$.unsubscribe(); //unsubscribe
  }

摘要页面html文件-将结果组件作为传递ID的子代

  <ion-col size-lg="5">
    <ion-row>
      <ion-col>
        <app-results-component [id]="id"></app-results-component>
      </ion-col>
    </ion-row>
  </ion-col>

摘要页面ts文件

  private id: number;
  private dataSub$;
  private resultData : any;

  ngOnInit() {
    this.activatedRoute.params.subscribe(params => {
      this.competitionId = params['id'];
      this.getData(this.id);
    }
  }

  getData(id) {
    this.dataSub$ = this.resultService.getResults(id);
    this.dataSub$
    .subscribe((data) => {
        this.resultData = data;
        this.dosomething(this.resultData);
      })
  }

  ngOnDestroy() {
    this.dataSub$.unsubscribe(); //unsubscribe
  }

解决方法

您必须取消订阅。

示例代码：

constructor(
    private resultService: ResultService
  ) { }

  subscription$ //declare

  ngOnInit() {
    this.fetchResults(this.id);
  }

  fetchResults(id){
    this.subscription$ = this.resultService.getResults(this.id)
      .subscribe((data) => 
      {
        data.forEach(resultElement => {
           //do something
        });
        this.resultList = data;
      })
  }

  ngOnChanges() {
    this.fetchResults(this.id);
  }

  ngOnDestroy() {
    this.subscription$.unsubscribe() //unsubscribe
  }
}

,

• 您需要添加条件if (changes.id)

• 似乎没有必要在onInit中调用它

• 您需要取消订阅可观察的

   private unSub = new Subject();
  
   constructor(
       private resultService: ResultService
   ) { }
  
   fetchResults(id){
       this.resultService.getResults(this.id)
           .pipe(
               takeUntil(this.unSub)
           )
           .subscribe((data) =>
           {
               data.forEach(resultElement => {
                   //do something
               });
               this.resultList = data;
           })
   }
   ngOnChanges(changes: SimpleChanges) {
       if (changes.id) {
           this.fetchResults(this.id);
       }
   }
  
   ngOnDestroy(): void {
       this.unSub.next();
       this.unSub.complete();
   }