Ionic 4 с angular7: проблема при создании службы загрузчика (async / await)

Question

Я пытаюсь создать службу оболочки LoaderService поверх Ionic4 LoadingController.

Вот мой фрагмент кода для 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();
    }

}

Цель: использование службы. Я хочу создать один экземпляр загрузчика в моем приложении и разрешить компонентам отображать и отключать загрузчик при выполнении вызовов 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;
    }

}