Ionic with Angular4：App组件调用Provider的showLoading方法报错求助

嘿，这个问题我之前在项目里也踩过坑，大概率是this指向错误或者依赖注入环节出了问题，咱们一步步来排查解决：

1. 先确认依赖注入是否完全正确 #

首先得确保你的UtilsService已经被正确注入到AppComponent里，并且在模块中注册了：

• 在AppComponent的构造函数中声明服务：

  import { UtilsService } from './path/to/utils.service';
  
  export class AppComponent {
    constructor(private utils: UtilsService) { } // 这里一定要用private/public修饰符注入
  }
  

• 同时要在app.module.ts的providers数组里注册这个服务：

  @NgModule({
    declarations: [AppComponent],
    providers: [UtilsService] // 确保服务在这里注册了
  })
  export class AppModule { }
  

  如果是共享服务，建议在共享模块里用providedIn: 'root'的方式声明，避免重复注册：

  @Injectable({ providedIn: 'root' })
  export class UtilsService { ... }
  

2. 检查登出函数的this绑定（最常见原因） #

很多时候这个错误并不是服务没加载，而是登出函数的this指向不是AppComponent实例。比如你把登出函数作为回调传给了菜单点击、平台事件（比如this.platform.backButton.subscribe(...)），如果用普通函数定义，this会指向调用者而不是组件本身。

解决方法有两种：

• 用箭头函数定义登出函数：箭头函数会继承外层的this指向，确保指向组件实例：

  export class AppComponent {
    constructor(private utils: UtilsService) { }
  
    // 用箭头函数定义
    logout = () => {
      this.utils.showLoading(); // 这里的this就是AppComponent实例
      // 后续的登出逻辑：清除token、跳转登录页等
    }
  }
  

• 在构造函数中手动绑定this：如果习惯用普通函数，可以在构造函数里绑定this：

  export class AppComponent {
    constructor(private utils: UtilsService) {
      // 手动绑定this到组件实例
      this.logout = this.logout.bind(this);
    }
  
    logout() {
      this.utils.showLoading();
      // 登出逻辑
    }
  }
  

3. 确认调用时机是否过早 #

AppComponent是应用的根组件，初始化时机非常早，如果你的UtilsService依赖于Ionic平台的初始化（比如用到了LoadingController、Platform等），那在platform.ready()之前调用showLoading可能会出问题。

可以把登出逻辑包裹在platform.ready()里：

import { Platform } from '@ionic/angular';

export class AppComponent {
  constructor(private utils: UtilsService, private platform: Platform) { }

  logout = () => {
    this.platform.ready().then(() => {
      this.utils.showLoading();
      // 登出逻辑
    });
  }
}

4. 排查UtilsService本身的问题 #

最后再确认下UtilsService里的showLoading方法是否正确：

• 检查方法名拼写是否正确（比如是不是写成了showloadin少了字母）；
• 确保方法是公有的（不要加private修饰符，否则组件无法调用）；
• 确认方法内部的逻辑没有问题，比如正确初始化了LoadingController：

  import { LoadingController } from '@ionic/angular';
  
  @Injectable({ providedIn: 'root' })
  export class UtilsService {
    constructor(private loadingCtrl: LoadingController) { }
  
    showLoading() {
      return this.loadingCtrl.create({
        message: '正在登出...'
      }).then(loader => loader.present());
    }
  }
  

按照上面的步骤排查，基本就能解决这个问题啦～

内容的提问来源于stack exchange，提问作者Judson Terrell