Ionic4 ion-page-invisible类未移除导致后续组件导航失效问题

根因说明 #

ion-page-invisible是Ionic用于管控导航栈页面可见性、配合转场动画的内置类，正常会在页面入场动画完成后自动移除。你遇到的问题触发逻辑如下：

1. Chrome 94版本调整了微任务与渲染帧的执行时序，而你使用的Ionic 4.2.0属于早期Ionic4版本，未兼容该时序变化，导致移除ion-page-invisible的内置回调没有被正确触发，出现类残留，页面功能异常。
2. 手动直接删除该类会破坏Ionic内部的导航状态标记，导致后续导航的状态判断全部出错，因此跳转操作无法触发。

修复方案 #

方案1：无侵入式代码补丁（无需升级依赖，不影响现有业务） #

在全局根组件或路由守卫中添加导航生命周期兼容逻辑，触发Ionic原生的状态更新，而非直接操作DOM类名，代码示例：

// app.component.ts 中添加
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  // 监听路由完成事件
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 对齐Chrome 94的渲染时序，延迟执行状态更新
    setTimeout(() => {
      const invisiblePages = document.querySelectorAll('.ion-page-invisible');
      invisiblePages.forEach(pageEl => {
        // 调用Ionic内置的组件就绪方法，触发官方的可见性更新逻辑
        if (pageEl['componentOnReady']) {
          pageEl['componentOnReady']().then(pageInstance => {
            pageInstance.setActive?.(true);
          });
        }
      });
    }, 0);
  });
}

该方案完全走Ionic官方API更新状态，不会破坏导航栈内部状态，也不会影响后续跳转逻辑。

方案2：依赖小版本升级（永久修复兼容问题） #

Ionic 4.11.10是Ionic4的最终稳定版，已经修复了Chrome高版本的渲染时序兼容问题，且完全兼容你当前使用的Angular 7.2.3、Typescript 3.1.6版本，无需升级核心框架。将Ionic依赖升级到该版本即可彻底解决类残留问题。

注意事项 #

禁止直接手动移除ion-page-invisible类，所有对页面可见性的操作都要通过Ionic暴露的官方API执行，避免破坏导航栈的状态一致性。

内容的提问来源于stack exchange，提问作者R S Moorthi