技术问询：如何在Ionic 2中创建全局单例Loading/Toast对象？

嘿，作为刚接触Ionic 2和TypeScript的新手，想要全局复用Loading/Toast确实是个很棒的想法——避免重复代码、保持逻辑一致，这绝对是前端开发里的最佳实践之一！我来给你一步步拆解实现思路：

在Ionic 2 + Angular的体系里，我们可以通过全局注入的服务来实现单例。首先创建一个专门的服务，用来封装Loading和Toast的所有操作逻辑。

你可以用Ionic CLI快速生成服务：

ionic g provider LoadingToastService

在生成的服务文件里，我们注入LoadingController和ToastController，然后封装显示、隐藏的方法，同时维护实例引用，避免重复创建：

import { Injectable } from '@angular/core';
import { LoadingController, ToastController, Loading, Toast } from 'ionic-angular';

@Injectable()
export class LoadingToastService {
  // 维护Loading和Toast的实例引用
  private loadingInstance: Loading | null = null;
  private toastInstance: Toast | null = null;

  constructor(
    private loadingCtrl: LoadingController,
    private toastCtrl: ToastController
  ) {}

  // 显示Loading，支持自定义提示文本
  showLoading(message: string = '加载中...') {
    // 如果已有Loading实例，先关闭再创建新的
    if (this.loadingInstance) {
      this.hideLoading();
    }
    this.loadingInstance = this.loadingCtrl.create({
      content: message,
      dismissOnPageChange: false // 可根据需求设置：页面切换时是否自动关闭
    });
    this.loadingInstance.present();
  }

  // 隐藏Loading
  hideLoading() {
    if (this.loadingInstance) {
      this.loadingInstance.dismiss()
        .then(() => {
          this.loadingInstance = null; // 释放引用，避免内存泄漏
        })
        .catch(err => {
          console.error('关闭Loading失败:', err);
        });
    }
  }

  // 显示Toast，支持自定义提示文本、时长、位置
  showToast(
    message: string,
    duration: number = 2000,
    position: 'top' | 'middle' | 'bottom' = 'bottom'
  ) {
    // 如果已有Toast实例，先关闭
    if (this.toastInstance) {
      this.toastInstance.dismiss();
    }
    this.toastInstance = this.toastCtrl.create({
      message,
      duration,
      position
    });
    this.toastInstance.present();
    // Toast自动关闭后释放引用
    this.toastInstance.onDidDismiss(() => {
      this.toastInstance = null;
    });
  }
}

打开app.module.ts，把这个服务添加到providers数组里，这样整个应用中只会存在一个服务实例（单例）：

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { LoadingToastService } from '../providers/loading-toast-service';

@NgModule({
  declarations: [MyApp],
  imports: [IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  providers: [LoadingToastService] // 注册为全局单例服务
})
export class AppModule {}

现在你可以在任何页面或组件里，直接注入这个服务，调用对应的方法即可，完全不用重复创建实例：

import { Component, OnDestroy } from '@angular/core';
import { LoadingToastService } from '../../providers/loading-toast-service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnDestroy {

  constructor(private loadingToastService: LoadingToastService) {}

  handleAsyncTask() {
    // 显示Loading
    this.loadingToastService.showLoading('正在处理请求...');
    
    // 模拟异步操作（比如API请求）
    setTimeout(() => {
      // 隐藏Loading
      this.loadingToastService.hideLoading();
      // 显示操作完成提示
      this.loadingToastService.showToast('操作成功！');
    }, 2000);
  }

  // 页面销毁时确保关闭Loading
  ngOnDestroy() {
    this.loadingToastService.hideLoading();
  }
}

• 你可以根据需求扩展方法，比如给Loading添加自定义CSS类、给Toast添加关闭按钮等；
• 记得在组件销毁时调用hideLoading，避免页面销毁后Loading还停留在界面上；
• 如果需要更灵活的配置，可以给方法添加可选参数，比如Loading的spinner类型、Toast的cssClass等。

这样一来，你就拥有了一个全局复用的Loading/Toast单例服务，再也不用在每个组件里重复写创建实例的代码啦！

内容的提问来源于stack exchange，提问作者Thach Huynh