带有 angular7 的 Ionic 4：创建加载程序服务的问题（异步/等待）

Question

我正在尝试在 Ionic4 LoadingController 之上创建一个包装服务 LoaderService。

这是LoaderService的代码sn-p

export class LoaderService {

    loader: HTMLIonLoadingElement;

    constructor(public loadingController: LoadingController) {
        console.log('constructor called');
        this.createLoader();
    }

    async createLoader() {
        this.loader = await this.loadingController.create({
            message: 'Loading',
        });
        console.log('loader created');
    }

    async showLoader() {
        await this.loader.present();
    }

    hideLoader() {
        this.loader.dismiss();
    }

}

要实现的目标：使用服务我想在我的应用程序中创建一个加载器实例，并允许组件在进行 API 调用时显示和关闭加载器。

问题：当我在组件中使用LoaderService 时，我得到TypeError: Cannot read property 'present' of undefined。 这是因为在异步创建加载器之前调用了showLoader。

这是我的组件在调用 API 和调用加载器时的代码：

getTopHeadlines() {
    this._loaderService.showLoader();
    this._newsApiServcie.getTopHeadLines('in')
        .subscribe(res => {
            this.articleList = res.articles;
            this._loaderService.hideLoader();
        });
}

另外，看看浏览器控制台

Answer 1

由于加载控制器在关闭时被销毁，所以即使您的意图是高尚的（在内存中覆盖一个加载器然后显示/隐藏它） - 这种方法似乎不是最佳的。

动态创建加载器覆盖并没有什么坏处。我会将您的代码修改为如下所示：

加载器服务：

export class LoaderService {

    loader: HTMLIonLoadingElement;

    constructor(public loadingController: LoadingController) {
    }

    showLoader() {
        if (this.loader) { 
            this.loader.present()
        } else {
            this.loader = this.loadingController.create({
                message: 'Loading',
            }).then(() => {
                this.loader.present()
            })
        }
    }

    hideLoader() {
        this.loader.dismiss();
        this.loader = null;
    }

}