离子4与angular7:问题创建加载程序服务(异步/等待)

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

这是我的代码片段

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调用时显示和关闭加载器。

问题:当我使用我的 装载机服务 在我的组件中,我得到了 TypeError: Cannot read property 'present' of undefined . showLoader 在异步创建加载程序之前调用。

下面是我的组件在进行API调用和调用loader时的代码:

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

另外,请查看浏览器控制台