Ionic 4 with angular7：创建加载程序服务时出现问题 (async/await)

Question

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

这是我的 LoaderService

代码片段

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

}

Goal to achieve: Using Service I want to create a single instance of loader in my app and allow components to show and dismiss the loader while making API calls.

问题：当我在我的组件中使用我的 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

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

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

加载程序服务：

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

}

Ionic 4 with angular7：创建加载程序服务时出现问题 (async/await)

Ionic 4 with angular7 : Issue creating loader service (async/await)

javascript

async-await

ionic-framework

angular

ionic4