Ionic 4：“加载控制器”dismiss() 在 present() 之前调用，这将保持微调器而不关闭答案

【问题标题】：Ionic 4: "Loading Controller" dismiss() is called before present() which will keep spinner without dismissingIonic 4：“加载控制器”dismiss() 在 present() 之前调用，这将保持微调器而不关闭
【发布时间】：2019-03-05 13:54:53
【问题描述】：

我使用“离子加载控制器”来显示一个微调器，直到检索到数据然后它调用“dismiss()”来解除它。它工作正常，但有时当应用程序已经拥有数据时，会在“create()”和“present()”完成之前调用“dismiss()”，这将使微调器不会被解雇......

我尝试调用“loadingController.present().then()”里面的数据，但是导致数据变慢了……

这是一个错误吗？如何解决这个问题？

我的代码示例：

customer: any;

constructor(public loadingController: LoadingController, private customerService: CustomerService)

ngOnInit() {
  this.presentLoading().then(a => consloe.log('presented'));
  this.customerService.getCustomer('1')
  .subscribe(customer => {
    this.customer = customer;
    this.loadingController.dismiss().then(a => console.log('dismissed'));
  }
}

async presentLoading() {
  const loading = await this.loadingController.create({
    message: 'wait. . .',
    duration: 5000
  });
  return await loading.present();
}

【问题讨论】：

您解决了吗？我也有同样的问题
我会写下我的解决方法作为答案，但我不是 100% 肯定是最好的方法

标签： angular ionic-framework angular6 loading ionic4

【解决方案1】：

这就是我解决问题的方法..

我使用布尔变量“isLoading”在调用dismiss() 时更改为false。在 present() 完成后如果 "isLoading" === false （意味着dismiss() 已经被调用）那么它会立即dismiss。

另外，我在服务中编写了代码，因此我不必在每个页面中重新编写。

loading.service.ts

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  isLoading = false;

  constructor(public loadingController: LoadingController) { }

  async present() {
    this.isLoading = true;
    return await this.loadingController.create({
      // duration: 5000,
    }).then(a => {
      a.present().then(() => {
        console.log('presented');
        if (!this.isLoading) {
          a.dismiss().then(() => console.log('abort presenting'));
        }
      });
    });
  }

  async dismiss() {
    this.isLoading = false;
    return await this.loadingController.dismiss().then(() => console.log('dismissed'));
  }
}

然后只需从页面调用 present() 和 dismiss()。

有问题的例子：

customer: any;

constructor(public loading: LoadingService, private customerService: CustomerService)

ngOnInit() {
  this.loading.present();
  this.customerService.getCustomer('1')
  .subscribe(
    customer => {
      this.customer = customer;
      this.loading.dismiss();
    },
    error => {
      console.log(error);
      this.loading.dismiss();
    }
  );

【讨论】：

完美运行。我只需要编辑这一行 (then((a)) . 以避免编译错误。}).then((a) => { .
这很好，但请注意，仅当 getCustomer 成功时才会调用dismiss()。如果出现错误，您需要再次调用它。例如：..getCustomer.subscribe(customer => {...dismiss(); }, error => {...dismiss(); })。并且可能使用 alertController 显示错误消息
暂时没有找到更好的东西
我们之前的“内容”怎么了？我想在内容上添加自己的微调器，但没有内容了。
我喜欢这个效果很好的解决方案。我只是不时遇到这个控制台错误：“覆盖不存在”。我解决了这个检查 getTop() 是否返回一些值 loadingController.getTop().then(value => value ? loadingController.dismiss() : null);

【解决方案2】：

以下是我在项目中解决相同问题的方法。我在 HTTP 拦截器中使用此服务来显示应用程序内所有 REST API 调用的加载程序。

loading.service.ts

import {Injectable} from '@angular/core';
import {LoadingController} from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  constructor(public loadingController: LoadingController) {
  }

  async present(options: object) {
    // Dismiss all pending loaders before creating the new one
    await this.dismiss();

    await this.loadingController
      .create(options)
      .then(res => {
        res.present();
      });
  }

  /**
   * Dismiss all the pending loaders, if any
   */
  async dismiss() {
    while (await this.loadingController.getTop() !== undefined) {
      await this.loadingController.dismiss();
    }
  }
}

在原始问题上下文中，可以如下使用：

...
import {LoadingService} from '/path/to/loading.service';
...
customer: any;

constructor(public loadingService: LoadingService, private customerService: CustomerService)

ngOnInit() {
  this.loadingService.present({
    message: 'wait. . .',
    duration: 5000
  });
  this.customerService.getCustomer('1')
  .subscribe(customer => {
    this.customer = customer;
    this.loadingService.dismiss();
  }
}

【讨论】：

拦截器中的这段代码是否适用于像 4-5 这样的页面中的多个 http 请求？
我认为应该。在我的应用程序主页中，我有 3 个同时运行的请求（一个用于主项目列表，两个用于下拉菜单）。

【解决方案3】：

对于 Ionic 4 检查此解决方案

来源Link

  import { Component } from '@angular/core';
  import { LoadingController } from '@ionic/angular';

  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage {

    loaderToShow: any;

    constructor(
      public loadingController: LoadingController
    ) {
    }


    showAutoHideLoader() {
      this.loadingController.create({
        message: 'This Loader Will Auto Hide in 2 Seconds',
        duration: 20000
      }).then((res) => {
        res.present();

        res.onDidDismiss().then((dis) => {
          console.log('Loading dismissed! after 2 Seconds');
        });
      });
    }

    showLoader() {
      this.loaderToShow = this.loadingController.create({
        message: 'This Loader will Not AutoHide'
      }).then((res) => {
        res.present();

        res.onDidDismiss().then((dis) => {
          console.log('Loading dismissed! after 2 Seconds');
        });
      });
      this.hideLoader();
    }

    hideLoader() {
      setTimeout(() => {
        this.loadingController.dismiss();
      }, 4000);
    }

  }

【讨论】：

谢谢，官方文档从未在这里为无限加载器设置示例ionicframework.com/docs/api/loading。感谢您提出
你声明了 loaderToShow 但你什么时候使用它？

【解决方案4】：

通过这种方式，它还解决了并发 API 调用加载程序解除问题修复。您也可以调用这些函数来形成拦截器。没有固定持续时间，因为如果任何调用需要很多时间，加载程序将继续。但是如果有人给出了持续时间，那么如果这个 API 不会在这个时候停止，加载器就会停止

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  isLoading = false;
  loaderCounter = 0;
  loading: HTMLIonLoadingElement;

  constructor(public loadingController: LoadingController) {}

  async present() {
    this.loaderCounter = this.loaderCounter + 1;

    if (this.loaderCounter === 1) {
      this.isLoading = true;
      const { loadingDuration, loadingMessage = loadingDefaultOptions.loadingMessage, loadingCssClass } = options;
      this.loading = await this.loadingController.create({
        duration: loadingDuration,
        message: loadingMessage,
        cssClass: loadingCssClass
      });
      await this.loading.present();
    }
  }

  async dismiss() {
    this.loaderCounter = this.loaderCounter - 1;
    if (this.loaderCounter === 0) {
        this.isLoading = false;
        await this.loading.dismiss();
    }
  }
}

【讨论】：

当你在拦截器中使用它时效果很好，也适用于多个 HTTP 请求。即使我做了 2 个请求，也只显示 1 个加载程序警报。干得好。

【解决方案5】：

虽然公认的解决方案可以工作......我认为最好只加载 1 次。我的解决方案会取消先前的加载（如果存在）并创建新的加载。我通常只想一次显示 1 个加载（我的特定用例），所以这个解决方案对我有用。

公认的解决方案提出了可能的孤立加载问题。但这是一个很好的起点?。

因此，这是我建议的可注射服务（如果需要，您可以使用更多离子设置对其进行过度充电。我不需要它们，因此我没有在当前功能中添加更多，但可以相应地添加）：

import {Injectable} from '@angular/core';
import {LoadingController} from '@ionic/angular';

@Injectable({
    providedIn: 'root'
})
export class LoadingService {

    currentLoading = null;

    constructor(public loadingController: LoadingController) {
    }

    async present(message: string = null, duration: number = null) {

        // Dismiss previously created loading
        if (this.currentLoading != null) {
            this.currentLoading.dismiss();
        }

        this.currentLoading = await this.loadingController.create({
            duration: duration,
            message: message
        });

        return await this.currentLoading.present();
    }

    async dismiss() {
        if (this.currentLoading != null) {

            await this.loadingController.dismiss();
            this.currentLoading = null;
        }
        return;
    }

}

【讨论】：

【解决方案6】：

使用列表对我来说效果更好

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({providedIn: 'root'})
export class LoadingService {
    private loaders = new Array<HTMLIonLoadingElement>();
    constructor(public loadingController: LoadingController) { }

    present(options?: object) {
        if (this.loaders.length === 0) {
            this.loadingController.create(options).then(loader => {
                this.loaders.push(loader);
                loader.present();
            });
        }
    }

    async dismiss() {
        if (this.loaders && this.loaders.length > 0) {
            this.loaders.forEach(async loader => {
                await loader.dismiss()
                    .then(() => {
                        loader = null;
                    })
                    .catch(e => console.log(e))
                    .finally(() => this.loaders = new Array<HTMLIonLoadingElement>());
            });
        }
    }
}

【讨论】：

【解决方案7】：

简单的方法是添加 setTimeOut 函数：

setTimeout(() => {
      this.loading.dismiss();
    }, 2000);

【讨论】：

【解决方案8】：

我正在使用类似的解决方案，但依赖于加载叠加层的 ID，并让 Ionic Loading Controller 管理应该在顶部的叠加层。

加载服务

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  constructor(public loadingController: LoadingController) { }

  async present(loadingId: string, loadingMessage: string) {
    const loading = await this.loadingController.create({
      id: loadingId,
      message: loadingMessage
    });
    return await loading.present();
  }

  async dismiss(loadingId: string) {
    return await this.loadingController.dismiss(null, null, loadingId);
  }
}

使用 LoadingService 的组件/服务

import { LoadingService } from '../loading/loading.service';

@Injectable({
  providedIn: 'root'
})
export class MessagesService {

  ...

  constructor(
    protected http: HttpClient,
    protected loading: LoadingService
  ) { }

  ...

  protected async loadMessagesOverview() {
    const operationUrl = '/v1/messages/overview';

    await this.loading.present('messagesService.loadMessagesOverview', 'Loading messages...');

    this.http.get(environment.apiUrl + operationUrl)
      .subscribe((data: Result) => {
        ...
        this.loading.dismiss('messagesService.loadMessagesOverview');
      }, error => {
        ...
        this.loading.dismiss('messagesService.loadMessagesOverview');
        console.log('Error getting messages', error);
      });
  }

}

【讨论】：

我认为这是在拦截器中使用加载器的最安全方式。相应地显示装载机和隐藏装载机。很棒

【解决方案9】：

我知道这个问题是在大约一年前问的。我面临同样的问题。我只想发布我的解决方案。我希望即将到来的访客能得到帮助。

async dismissLoading() {
    console.log("dismiss");
    this.isLoading = false;
  }
 private async presentLoading(msg) {
    console.log("loading");
    const loading = await this.loadingCtrl.create({
      message: msg,
    });
    await loading.present();
    var timer = setInterval(() => {
      if (!this.isLoading) {
        loading.dismiss();
        clearInterval(timer);
        console.log("set dismiss");
      }
    }, 1000);
  }
  async loadingmsg() {
    this.isLoading = true;
    await this.presentLoading("Please wait while...");
  }

这个解决方案对我有用。如果我错了，请纠正我。

【讨论】：

【解决方案10】：

我对这个问题的解决方案是设置一个状态变量。这里是：

@Injectable()
    export class LoaderSerive {
    private status: 'pending' | 'dismissed' | 'present' = 'dismissed';

    constructor(public loadingCtrl: LoadingController) {}

    public show() {
        if (this.status === 'present') {
            this.hide();
        }

        this.status = 'pending';

        this.loadingCtrl.create({
            id: 'spoon-indicator-1',
            spinner: null,
            message: `
                <div>
                    <div class="loading-indicator--position">
                        <div class="loading-indicator">
                            <div class="bowl">
                                <div class="spoon"></div>
                                <div class="bowl-content"></div>
                            </div>
                        </div>
                    </div>
                </div>`,
            duration: 6000
        })
        .then((loader) => loader.present())
        .then(() => {
            if (this.status === 'pending') {
                this.status = 'present';
            } else {
                this.hide();
            }
        });
    }

    public hide() {
        this.loadingCtrl
            .dismiss(null, undefined, 'spoon-indicator-1')
            .catch((err) => Utilities.log('Loader error!', err))
            .then(() => this.status = 'dismissed');
    }
}

【讨论】：

【解决方案11】：

我遇到了同样的问题，也许我有一个使用离子事件本身更简单、更可靠的解决方案。这对我有用。它将一直等到加载器创建完成，然后才会完成服务调用，只有当服务调用完成时，加载器才会被解除。我希望这会有所帮助..

yourFuncWithLoaderAndServiceCall(){
     this.presentLoading().then(()=>{
         this.xyzService.getData(this.ipObj).subscribe(
           res => {
            this.dismissLoading();
        this.dismissLoading().then(() => {
        this.responseObj = res;
                   })
                  }
                 });
                }

async presentLoading() {
    this.loader = await this.loadingController.create({
      translucent: true
    });
    await this.loader.present();
  }

  async dismissLoading() {
    await this.loader.dismiss();
  }

【讨论】：

【解决方案12】：

这个 onDidDismiss() 事件应该在调用 .present() 函数之后创建。

例子：

this.loader.present().then(() => {
            this.loader.onDidDismiss(() => {
                console.log('Dismiss');
            })
        });

【讨论】：

【解决方案13】：

同样的问题，这里是我的解决方案（离子 4 和角度 7）：

从公认的解决方案开始。

现在创建一次加载在dismiss函数中，只有当dimiss返回true时，我才将isShowing设置为false

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  isDismissing: boolean;
  isShowing: boolean;

  constructor(public loadingController: LoadingController) { 

  }

  async present() {
    if(this.isShowing){
      return
    }

    this.isShowing = true

    await this.loadingController.create({spinner: "dots"}).then(re => {
      re.present()
      console.log("LoadingService presented", re.id)
    })
  }

  async dismiss() {
    if(this.isShowing){
      await this.loadingController.dismiss().then(res => {
        if(res){
          this.isShowing = false
          console.log("LoadingService dismissed", res);
        }
      })
    }
  }
}

【讨论】：

您好我试过这个解决方案，但它不起作用。您是否正在调用已完成订阅的解雇？因为在我的日志中它显示在打印“LoadingService present”之前关闭调用.. 我在 ionic 4, Angular 8. 我使用 httpClient.get (observable) 调用 API

【解决方案14】：

在尝试了一切之后，这就是我最终想出的。到目前为止似乎运行良好。

尝试以 500 毫秒的间隔使用 setInterval。我还尝试保持函数非异步，以便它可以轻松地在消费端使用。

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({ providedIn: 'root' })
export class UiService {
    constructor(private loading: LoadingController) { }

    private loader: HTMLIonLoadingElement;
    private loaderLoading = false;

    public showLoading(message: string) {
        this.loaderLoading = true;
        this.loading.create({
            message,
            showBackdrop: true
        }).then(load => {
            this.loader = load;
            load.present().then(() => { this.loaderLoading = false; });
        });
    }

    public dismissLoading() {
        const interval = setInterval(() => {
            if (this.loader || !this.loaderLoading) {
                this.loader.dismiss().then(() => { this.loader = null; clearInterval(interval)});
            } else if (!this.loader && !this.loaderLoading) {
                clearInterval(interval);
            }
        }, 500);
    }
}

【讨论】：

【解决方案15】：

我在使用 Ionic 4 加载控制器时遇到了同样的问题。经过反复试验，我得到了有效的解决方案。

由于加载控制器函数正在使用 async 和 await，因为它们都是异步函数。

dismiss() 函数将在 present() 函数之前调用，因为，dismiss 函数不会等到创建和呈现加载器，它会在 present() 函数调用之前触发。

下面是工作代码，

   loading:HTMLIonLoadingElement;
   constructor(public loadingController: LoadingController){}

   presentLoading() {
     if (this.loading) {
       this.loading.dismiss();
     }
     return new Promise((resolve)=>{
       resolve(this.loadingController.create({
        message: 'Please wait...'
      }));
     })
   }

  async dismissLoading(): Promise<void> {
    if (this.loading) {
      this.loading.dismiss();
    }
  }

  someFunction(){
    this.presentLoading().then((loadRes:any)=>{
      this.loading = loadRes
      this.loading.present()

      someTask(api call).then((res:any)=>{
        this.dismissLoading();
      })
    })
  }

【讨论】：

【解决方案16】：

我找到了一种新方法。我希望它有帮助！它使用加载的id。因此，如果您有很多加载，您不想关闭错误的加载。

在服务中：

async showLoading(loadingId: string, loadingMessage: string = 'Loading...') {
            const loading = await this.loadingCtrl.create({
              id: loadingId,
              message: loadingMessage,
              spinner: 'circles'
            });
            return await loading.present();
}

async dismissLoader(loadingId: string) {
  return await this.loadingCtrl.dismiss(null, null, loadingId).then(() => console.log('loading dismissed'));
}

在调用加载的组件中：

await this.globalVars.showLoading('ifOfLoading')

关闭加载：

this.globalVars.dismissLoader('ifOfLoading')

【讨论】：

【解决方案17】：

离子 5 - 简单而简短，使用 setTimeout，setInterval 与其说是解决方案，不如说是一种变通方法。

在我的例子中，我有 presentLoading 方法异步和dismissLoading 方法同步.. 导致这个问题。

我刚刚在我的dismissoading 中添加了async await，它工作得很好。对于没有“覆盖不存在”错误的安全开关，添加了一个布尔值，仅在加载程序存在时关闭

  async presentLoading() {
    this.loadingPresent = true;
    const loading = await this.loadingController.create({
      message: 'Loading...',
    });
    return await loading.present();
  }

  async dismissLoading() {
    if (this.loadingPresent) {
      await this.loadingController.dismiss();
    }
    this.loadingPresent = false;
  }

【讨论】：

【解决方案18】：

检查一下！

在阅读了这些解决方案后，我想出了一个防止装载机堆积等的解决方案。效果很好！

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { LoadingOptions } from '@ionic/core';
import { TranslateService } from '@ngx-translate/core';
import { isNil } from 'lodash-es';
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';

enum LoadingTypeEnum {
  show,
  hide,
  message,
}

@Injectable({
  providedIn: 'root',
})
export class LoadingService {
  /**
   *  this is a special behavior subject we can use on an inital load to show or hide a background etc.
   *  EXAMPLE: on inital profile load, we might want to have ngIf on an overlay and simply listen for this event.
   */

  public appLoaded$ = new BehaviorSubject<boolean>(false);
  public loading$: BehaviorSubject<{ type: LoadingTypeEnum; data?: any }> = new BehaviorSubject<any>({ type: LoadingTypeEnum.hide });
  loadingState: { type: LoadingTypeEnum; data?: any } = null;
  public loading: HTMLIonLoadingElement = null;
  public loaderLoaded = false;
  public i;
  public spinningUp = false;

  constructor(private loadingController: LoadingController, private translate: TranslateService) {
    const l$ = this.loading$.pipe();
    l$.pipe(filter((l) => l.type === LoadingTypeEnum.show)).subscribe((l) => this.showLoading(l.data));
    l$.pipe(filter((l) => l.type === LoadingTypeEnum.hide)).subscribe(() => this.hideLoading());
  }

  show(opts?: LoadingOptions) {
    if (isNil(opts)) {
      opts = {
        message: 'Please wait...', // this.translate.instant('PLEASE_WAIT'),
      };
    }
    this.loading$.next({ type: LoadingTypeEnum.show, data: opts });
  }

  hide() {
    this.loading$.next({ type: LoadingTypeEnum.hide });
  }

  message(m: string) {
    this.loading$.next({ type: LoadingTypeEnum.message, data: m });
  }

  private async showLoading(opts: LoadingOptions) {
    if (!this.loading && !this.spinningUp) {
      this.spinningUp = true;
      this.loading = await this.loadingController.create(opts);
      await this.loading.present();
      this.spinningUp = false;
    }
  }

  private async hideLoading() {
    const t = setTimeout(() => {
      if (this.loading && !this.spinningUp) {
        this.loading.dismiss().then(() => {
          this.loading = null;
          this.spinningUp = false;
          clearTimeout(t);
        });
      }
    }, 1000);
  }
 
}

【讨论】：

【解决方案19】：

另一种使用 RxJs 的方法：

import {Injectable} from '@angular/core';
import {LoadingController} from '@ionic/angular';
import {BehaviorSubject, of} from 'rxjs';
import {filter, pairwise, scan, switchMap} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  private dialog;
  private toggleLoading$ = new BehaviorSubject<number>(0);

  constructor(private loadingController: LoadingController) {
    this.toggleLoading$.pipe(
      scan((acc, curr) => acc + curr, 0),
      pairwise(),
      switchMap(([prev, curr]) => {
        if (prev <= 0 && curr > 0) {
          return this.loadingController.create();
        }
        if (prev > 0 && curr <= 0) {
          this.dialog?.dismiss();
        }
        return of(null)
      }),
      filter(d => !!d)
    ).subscribe((d) => {
      d.present();
      this.dialog = d;
    });
  }

  showLoading() {
    this.toggleLoading$.next(1);
  }

  hideLoading() {
    this.toggleLoading$.next(-1);
  }

}

【讨论】：

【解决方案20】：

第一个选项是值得推荐的，但我为我使用了这个代码。对我有用。

 setTimeout(() => {
    this.loading.dismiss();     
 }, 1500)

【讨论】：

【解决方案21】：

或者，您必须更改调用加载的代码，如下所示

async ngOnInit() {
  const loading = await this.loadingController.create();
  await loading.present();
  this.customerService.getCustomer('1')
  .subscribe(customer => {
    this.customer = customer;
    loading.dismiss();
  }
}

【讨论】：

是的，它与 loading.present().then(...) 相同，但正如我在问题中所说，在加载完成之前不会请求数据（所以它会慢一些）。在我的解决方案中，它将同时进行。

【解决方案22】：

我遇到了同样的问题，显然我是通过首先确定问题来解决的。当加载器的持续时间到期时会出现此问题，因此它基本上在没有我们完全控制的情况下被解雇了..

现在，它会正常工作，直到您也手动使用 dismiss()。

因此，如果您要手动使用dismiss() 和持续时间，请在创建时删除持续时间。然后使用setTimeout()也许

// create loader
this.loader = this.loadingCtrl.create()

// show loader
this.loader.present().then(() => {})

// add duration here
this.loaderTimeout = setTimeout(() => {
    this.hideLoader()
}, 10000)

然后在这里创建你的隐藏加载器

// prepare to hide loader manually
hideLoader() {
   if (this.loader != null) {
      this.loader.dismiss();
      this.loader = null
    }

    // cancel any timeout of the current loader
    if (this.loaderTimeout) {
      clearTimeout(this.loaderTimeout)
      this.loaderTimeout = null
    }
}

【讨论】：