Ionic v7+Angular：iOS端ion-loading无法点击背景关闭问题

问题描述 #

使用Ionic v7结合Angular开发时，LoadingController的backdropDismiss属性仅在iOS端失效——点击加载弹窗的背景无法关闭弹窗，但浏览器和Android端均能正常触发背景点击关闭逻辑。LoadingController被注入到服务中调用，最小复现代码如下：

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

@Injectable()
export class MyTestService {
  private readonly loadingController = inject(LoadingController);

  showLoading(): void {
    this.loadingController.create({
      message: 'loading',
      spinner: 'dots',
      showBackdrop: true,
      backdropDismiss: true,
    }).then((element) => element.present());
  }
}

曾尝试给ion-loading添加自定义CSS类（低版本Ionic的常见解决方案），但未解决问题：

components.scss代码：

ion-loading.backdrop-workaround {
  --height: auto;
}

添加自定义类的加载实例代码：

this.loadingController.create({
  message: 'loading',
  spinner: 'dots',
  showBackdrop: true,
  backdropDismiss: true,
  cssClass: 'backdrop-workaround',
}).then((element) => element.present());

解决方案 #

方案1：手动监听背景点击事件 #

直接在加载弹窗present后，获取背景元素并绑定点击关闭逻辑，绕过组件内置的backdropDismiss限制：

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

@Injectable()
export class MyTestService implements OnDestroy {
  private readonly loadingController = inject(LoadingController);

  showLoading(): void {
    this.loadingController.create({
      message: 'loading',
      spinner: 'dots',
      showBackdrop: true,
      backdropDismiss: true,
    }).then(async (loading) => {
      await loading.present();
      
      // 获取背景元素并绑定点击事件
      const backdrop = document.querySelector('.loading-backdrop');
      if (backdrop) {
        const clickHandler = async () => {
          await loading.dismiss();
          backdrop.removeEventListener('click', clickHandler);
        };
        backdrop.addEventListener('click', clickHandler);
      }
    });
  }

  ngOnDestroy(): void {
    // 清理可能残留的事件绑定
    const backdrop = document.querySelector('.loading-backdrop');
    backdrop?.removeEventListener('click', () => {});
  }
}

方案2：强制覆盖iOS端的样式与事件行为 #

Ionic在iOS模式下可能默认禁用了加载弹窗背景的点击事件，通过全局CSS强制开启：

/* 在global.scss中添加 */
.ios ion-loading .loading-backdrop {
  pointer-events: auto !important;
  cursor: pointer;
}

若存在层级遮挡问题，可同时调整弹窗层级：

.ios ion-loading {
  z-index: 1000 !important;
}

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