Question

我使用“离子加载控制器”来显示微调器，直到检索到数据，然后调用“ 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();
}

Answer 1

这就是我解决问题的方式。

当调用dismiss（）时，我使用了一个布尔变量“ isLoading”更改为false。在present（）完成后，如果“ isLoading” === false（表示已调用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();
    }
  );

注意：不要忘记在AppModule的提供程序中添加“ LoadingService”

Answer 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();
  }
}

Answer 3

这样，它还解决了并发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();
    }
  }
}

Answer 4

对于 Ionic 4 ，请检查此解决方案

来源

  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);
    }

  }

Answer 5

使用列表对我来说更好

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>());
            });
        }
    }
}

Answer 6

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

@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');
    }
}

Answer 7

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

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...");
  }

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

Answer 8

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

lea rdi, [rip+message]

Answer 9

另一种使用 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);
  }

}

Answer 10

检查一下！

在阅读完这些解决方案后，我想出了一个解决方案，可以防止装载程序堆积等。

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);
  }
 
}

Answer 11

离子5- 使用setTimeout简单，简短，setInterval只是一种解决方法，而不是解决方案。

就我而言，我有presentLoading方法异步和dismissLoading方法同步..引起了此问题。

我刚刚将async等待添加到了我的撤消操作中，并且它运行良好。对于没有“覆盖物不存在”错误的安全开关，添加了一个布尔值，仅当存在装载机时才关闭

  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;
  }

Answer 12

我找到了一种新的方法。希望对您有所帮助！它使用 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')

Answer 13

使用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();
      })
    })
  }

Answer 14

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

尝试以500ms的间隔使用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);
    }
}

Answer 15

此onDidDismiss（）事件应在调用.present（）函数之后创建。

示例：

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

Answer 16

我遇到了同样的问题，显然我是通过首先确定问题来解决的。当该Loader的持续时间到期时，就会发生此问题，因此在没有我们完全控制的情况下，它基本上就被关闭了。

现在，它将正常工作，直到您也手动使用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
    }
}

Answer 17

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

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

Answer 18

虽然可接受的解决方案可以正常工作... ，我认为最好始终只加载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;
    }

}

Answer 19

我面临着同样的问题，也许我有一个使用离子事件本身的更简单，更可靠的解决方案。这对我有用。它将一直等待，直到创建了加载程序，然后才完成服务调用，只有当服务调用完成时，才可以关闭加载程序。希望对您有所帮助。

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();
  }

Answer 20

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

LoadingService

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);
      });
  }

}

Answer 21

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

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

离子4：在present（）之前调用“ Loading Controller” dismiss（），它将保持微调器不关闭

21 个答案:

LoadingService

使用LoadingService的组件/服务