Ionic 5 Angular LoadingController 未捕獲（承諾）：覆蓋不存在

Question

我正在使用 ionic 5，並嘗試將 ion LoadingController 與解析器一起使用。

起初，我遇到的問題是在loadingController.dismiss() loadingController.create()完成之前調用了 loadingController.dismiss()，所以我按照這里的說明進行操作： Ionic 4: "Loading Controller"dismiss() is called before present() which will keep微調器沒有解雇。

所以，我創建了一個服務來顯示和關閉加載器，如下所示：

  export class LoaderService {

  isLoading = false;

  constructor(public loadingController: LoadingController) { }

  async present() {
    this.isLoading = true;
    return await this.loadingController.create().then(a => {
      a.present().then(() => {
        if (!this.isLoading) {
          a.dismiss();
        }
      });
    });
  }

  async dismiss() {
    if (this.isLoading) {
      this.isLoading = false;
      return await this.loadingController.dismiss();
    }
    return null;
  }
}

我在 app.component 中調用它

 constructor(
    private platform: Platform, private loaderService: LoaderService,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private languageService: LanguageService,
    private appDataService: AppDataService,
    private popOverCtrl: PopoverController,
    private auth: AuthService, private router: Router
  ) {

      this.router.events.subscribe((event: Event) => {
        switch(true){
          case event instanceof NavigationStart: {
            this.loaderService.present();
            break;
          }

          case event instanceof NavigationEnd:
          case event instanceof NavigationCancel:
          case event instanceof NavigationError: {
            this.loaderService.dismiss();
            break;
          }
          default: {
            break;
          }
        }
      })
      this.initializeApp();
  }

但我收到以下錯誤：

Answer 1

import { Injectable } from '@angular/core';
import {
    HttpInterceptor,
    HttpRequest,
    HttpResponse,
    HttpHandler,
    HttpEvent,
    HttpErrorResponse
} from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { LoadingController } from '@ionic/angular';



@Injectable()
export class  SpinnerInterceptor implements HttpInterceptor {

  isLoading = false;
  loaderToShow: any;
  constructor(
    public loadingController: LoadingController
    ) { }
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      this.present();
      return next.handle(req).pipe(
                map((event: HttpEvent<any>) => {
                  this.dismiss();
                    if (event instanceof HttpResponse) {
                        console.log('event--->>>', event);
                    }
                    return event;
                }));
  }

  public loader:any
  async present() {
    this.loader = await this.loadingController.create({
      cssClass: 'my-custom-class',
      message: 'Please wait...',
      duration: 2000
    });
    await this.loader.present();
  }


    async dismiss() {
      let topLoader = await this.loadingController.getTop();
      while (topLoader) {
        if (!(await topLoader.dismiss())) {
          // throw new Error('Could not dismiss the topmost loader. Aborting...');
          break
        }
        topLoader = await this.loadingController.getTop();
      }
    }
}

Answer 2

未捕獲（承諾中）：覆蓋不存在是一個非常普遍的錯誤，可能會出現在多種情況下。 通常，它在嘗試解析 promise 時發生，並且它不存在。

解決方案非常簡單，我們嘗試在尚未創建模態或加載組件時關閉它。

您應該使用 ionic 生命周期（請參閱文檔）在關閉 LoadingController 之前對其進行初始化：

• ngOnInit
• ionViewWillEnter
• ionViewDidEnter
• ionViewWillLeave
• ionViewDidLeave
• ngOnDestroy

ngOnInit() { // or you can use ionViewWillEnter()
    this.loaderService.present(); }

ionViewDidEnter() {
    this.loaderService.dismiss();
}

我希望它有所幫助。

Answer 3

在超時 function 中調用加載程序為我解決了這個問題。 對加載程序 function 的所有調用均來自共享服務。

  presentLoading(duration?,text?) {
    this.platform.ready().then(()=>{
      setTimeout(()=>{
        this.startLoader(duration,text);
      },2000)
    })
  }
  async startLoader(duration?,text?){
    const loading = await this.loadingController.create({
      cssClass: 'my-custom-class',
      message: (text)?('Please wait...'+text):'Please wait...',
      duration: (duration)?duration:''
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();
  }

並確保在關閉加載程序之前檢查加載程序是否處於活動狀態

dismissLoader(){
    this.loadingController.getTop().then(v => v ? this.doStopLoader() : null);
  }
  doStopLoader(){
    this.loadingController.dismiss();
  }
 

Answer 4

這也可能是由於在瀏覽器中運行您的應用程序造成的，尤其是在使用瀏覽器設備模擬（在 Chrome 中稱為“設備工具欄”，在 Firefox 中稱為響應模式）時。 嘗試禁用設備工具欄 (Ctrl+Shift+M) 或在物理設備上運行您的應用程序或使用適當的模擬器。