如何避免Ionic 3 LoadingController出现堆叠重叠问题？

我之前升级Ionic版本后也碰到过一模一样的问题！旧版本里LoadingController默认是单例模式，同一时间只会显示一个加载器，但新版本调整了默认逻辑，允许创建多个实例，所以当你连续触发异步调用时，透明背景的加载器就会叠在一起，看起来特别别扭。

下面是几种亲测有效的解决办法，我自己用第一种最多：

1. 封装单例Loading服务（推荐） #

自己写一个全局服务来统一管理Loading实例，确保同一时间只有一个加载器在显示。不管你调用多少次显示方法，都不会出现重叠问题，还能统一加载器的样式和行为。

示例代码：

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

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  private currentLoading: Loading | null = null;

  constructor(private loadingCtrl: LoadingController) {}

  async show(message: string = '加载中...') {
    // 如果已有加载器存在，直接返回，不创建新实例
    if (this.currentLoading) {
      return;
    }
    this.currentLoading = await this.loadingCtrl.create({
      message,
      translucent: true, // 你的透明背景配置
      // 可以在这里统一添加其他默认配置，比如spinner样式等
    });
    await this.currentLoading.present();
  }

  async hide() {
    if (this.currentLoading) {
      await this.currentLoading.dismiss();
      this.currentLoading = null; // 清空实例引用，避免内存泄漏
    }
  }
}

使用的时候，只要在页面或服务里注入这个LoadingService，调用show()和hide()就可以了，完全不用操心重叠的问题。

2. 每次创建前先关闭已有的加载器 #

如果你不想额外写服务，也可以在每次创建新加载器前，先调用loadingCtrl.dismiss()（它会自动忽略不存在的实例，不会抛出错误），然后再创建新的加载器：

// 触发异步操作前
await this.loadingCtrl.dismiss(); // 先关闭所有已存在的加载器
const loading = await this.loadingCtrl.create({
  message: '加载中...',
  translucent: true
});
await loading.present();

// 异步操作完成后
await loading.dismiss();

不过这种方法有个小瑕疵：如果两个异步操作几乎同时触发，可能会出现第一个加载器刚创建就被第二个的dismiss关掉的情况，所以还是单例服务的方案更稳妥。

3. 检查旧版配置（大概率无效） #

旧版本的Ionic可能有loadingController的单例配置项，但新版本已经移除了这个默认设置，所以这个方法基本没用，不过你可以试试在app.module.ts里检查有没有相关配置——但我个人不推荐依赖这个，毕竟官方已经明确调整了默认逻辑。

总结一下，最靠谱的还是封装单例服务，既能解决重叠问题，也能提升代码的复用性，后续修改加载器样式也更方便。

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