Ionic 3中如何判断页面预加载成功？实现预加载完成弹窗提示

嘿，这个问题我刚好折腾过！Ionic 3的preloadModules确实没直接提供预加载完成的生命周期钩子，但咱们可以通过自定义预加载策略来实现你要的提示效果，一步步来：

1. 创建自定义预加载策略类 #

首先，我们要写一个自定义的预加载服务，继承Ionic自带的预加载逻辑，这样就能在每个模块加载完成后插入自己的提示代码。

在项目里新建src/app/custom-preload-strategy.ts文件，代码如下：

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators'; // 别忘了导入tap操作符
import { ToastController } from 'ionic-angular';
import { Injectable } from '@angular/core';

@Injectable()
export class CustomPreloadStrategy implements PreloadingStrategy {
  // 可选：如果要统计总加载数量，添加这两个变量
  private loadedPageCount = 0;
  private totalTargetPages = 3; // 对应Home、About、Contact三个页面

  constructor(private toastCtrl: ToastController) {}

  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // 执行原有的预加载逻辑，并在加载完成后触发提示
    return load().pipe(
      tap(() => {
        // 过滤出我们关心的三个页面路由
        if (['home', 'about', 'contact'].includes(route.path)) {
          // 方案1：每个页面加载完成单独提示
          // this.showToast(`页面 ${route.path} 预加载完成！`);

          // 方案2：所有目标页面加载完成后统一提示
          this.loadedPageCount++;
          if (this.loadedPageCount === this.totalTargetPages) {
            this.showToast('所有页面预加载完成！');
          }
        }
      })
    );
  }

  // 封装提示弹窗方法
  private showToast(message: string) {
    const toast = this.toastCtrl.create({
      message: message,
      duration: 2000,
      position: 'bottom'
    });
    toast.present();
  }
}

2. 在AppModule中配置自定义策略 #

接下来，把我们写的自定义策略替换掉Ionic默认的预加载策略，修改src/app/app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
// 导入自定义预加载策略
import { CustomPreloadStrategy } from './custom-preload-strategy';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AboutPage,
    ContactPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      preloadModules: true // 保持预加载开启
    }, {
      // 替换默认的预加载策略
      preloadingStrategy: CustomPreloadStrategy
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AboutPage,
    ContactPage
  ],
  // 把自定义策略加入服务提供者
  providers: [CustomPreloadStrategy]
})
export class AppModule {}

3. 小提示 #

• 如果你的项目还有其他路由，一定要通过route.path过滤，不然无关页面加载也会触发提示；
• 两种提示方案可以二选一，根据你的需求调整；
• 测试的时候可以稍微放慢网络速度，更容易看到预加载完成的提示效果。

这样就能完美实现预加载完成后弹出提示的需求啦！

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