Ionic 3中如何创建全局复用Loader以减少数据冗余？

首先，你遇到的removeView was not found错误，核心原因是Ionic的Loading组件在被dismiss()之后，对应的视图已经被从DOM中移除，无法再次调用present()复用同一个实例。你之前的Service提前创建了一个Loader实例，第一次dismiss后这个实例就失效了，再次调用showLoader时自然会报错。

下面是两种可行的解决方案，既满足全局复用的需求，又避免重复创建带来的冗余：

方案一：Service中动态管理Loader实例 #

这个方案会在需要显示Loader时检查实例状态，不存在则创建，关闭后销毁实例，确保每次操作的都是有效实例：

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

@Injectable()
export class BasicService {
  private loader: Loading | null = null;

  constructor(public loadingCtrl: LoadingController) {}

  showLoader(content: string = 'loading...') {
    // 如果当前没有活跃的Loader实例，才创建新的
    if (!this.loader) {
      this.loader = this.loadingCtrl.create({
        content: content
      });
      this.loader.present();
    }
  }

  hideLoader() {
    // 确保Loader实例存在且正在显示，再执行dismiss
    if (this.loader) {
      this.loader.dismiss()
        .then(() => {
          // 关闭后重置实例，避免下次复用失效
          this.loader = null;
        })
        .catch(err => {
          console.error('关闭Loader时出错:', err);
        });
    }
  }
}

使用方式也很简单，在组件中注入BasicService后：

// 显示Loader
this.basicService.showLoader('加载中...');

// 请求完成后关闭
this.someService.getData().subscribe(res => {
  // 处理数据
  this.basicService.hideLoader();
});

方案二：封装带自动关闭的Loader方法（结合Promise） #

如果你的场景大多是在异步请求前后显示/关闭Loader，可以进一步封装，让Service直接处理异步操作，自动管理Loader的生命周期：

import { Injectable } from '@angular/core';
import { LoadingController, Loading } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/finally';

@Injectable()
export class BasicService {
  private loader: Loading | null = null;

  constructor(public loadingCtrl: LoadingController) {}

  // 封装：执行异步操作时自动显示/关闭Loader
  withLoader<T>(observable: Observable<T>, content: string = 'loading...'): Observable<T> {
    this.showLoader(content);
    return observable.finally(() => {
      this.hideLoader();
    });
  }

  private showLoader(content: string) {
    if (!this.loader) {
      this.loader = this.loadingCtrl.create({ content });
      this.loader.present();
    }
  }

  private hideLoader() {
    if (this.loader) {
      this.loader.dismiss().then(() => {
        this.loader = null;
      });
    }
  }
}

使用时更简洁，不需要手动调用show/hide：

this.basicService.withLoader(this.someService.getData(), '获取数据中...')
  .subscribe(res => {
    // 处理返回的数据
  });

这两种方案都避免了重复创建Loader的冗余问题，同时遵循了Ionic组件的生命周期规则，不会出现removeView的错误。

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