IONIC - ANGULAR 為什么單擊返回按鈕時我有相同的多個請求？

Question

我的頁面上有后退按鈕。 當我停留在第 1 頁和 go 到第 2 頁時，我只有一個請求。 當我從第 2 頁到第 1 頁單擊后退按鈕時，我收到兩個相同的請求。 如果我再次 go 到 PAGE 2 並且 go 返回我收到三個相同的請求。

為什么？

我在第 1 頁上有這個

ionViewWillEnter() {

    this.route.paramMap.subscribe(paramMap => {
      if (!paramMap.has('id_store')) {
        this.location.back();
        return;
      }
    this.isLoading = true;

    this.atv_id = paramMap.get('id_store');


        this.loadingCtrl
        .create({ keyboardClose: true, message: 'Carico categorie...' })
        .then(loadingEl => {
          loadingEl.present();

          this.subcriber = this.ristoserv.postRistoCategories(this.atv_id).subscribe( (response: any ) => {

            // check zona selezionata
            this.storage.getObject('zoneData').then((data: any) => {
            });

            this.categories = response;
            this.IdType = paramMap.get('id_type');

            this.isLoading = false;
            loadingEl.dismiss();

          }, errRes => {

            loadingEl.dismiss();
            const code = errRes.error.error.message;
            console.log('error', code);
            this.isLoading = true;

          });
        });
    });
  };

Answer 1

每次調用ionViewWillEnter()時，都會創建新的路由訂閱。 您應該取消訂閱它。

創建屬性

private unsubscribe$ = new Subject<void>();

用它來取消訂閱

this.route.paramMap
  .pipe(takeUntil(this.unsubscribe$))
  .subscribe(paramMap => {

並在組件銷毀時發出它。

ngOnDestroy() {
  this.unsubscribe$.next();
}

您可以使用庫@ngneat/until-destroy更輕松地做到這一點。

或者只是確保您只初始化一次：如果您只更改路由器中的參數，它可能不會重新創建您的組件 - 取決於onSameUrlNavigation配置。

如果您展示了如何/何時調用ionViewWillEnter()將會有所幫助。