如何使用 tabs.router.module 中的路由在 Ionic 4 中触发 ionViewWillLeave

Posted 2023-03-13

【中文标题】如何使用 tabs.router.module 中的路由在 Ionic 4 中触发 ionViewWillLeave

【英文标题】：How to trigger ionViewWillLeave in Ionic 4 with route in tabs.router.module

【发布时间】：2019-08-17 02:11:30

【问题描述】：

在 TabsPageRoutingModule 中放置所有页面路由时，不会触发生命周期挂钩 ionViewWillLeave / ionViewDidLeave。

我们将路线从 app-routing.module.ts 更改为 tabs.router.module.ts 以全面查看 Ionic 4 应用程序中的标签栏。这些路线完美无缺。 当路由在app-routing.module.ts 中时，在离开页面（并关闭当前Observables）时总是会触发ionViewWillLeave。现在离开页面时不会触发ionViewWillLeave。

tabs.router.module.ts 中的路由

const routes: Routes = [
  
    path: 'tabs',
    component: TabsPage,
    children: [
      
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      ,
      
        path: 'home',
        outlet: 'home',
        component: HomePage
      ,
      
        path: 'chats',
        outlet: 'chats',
        component: ChatsPage
      ,
...

TS 文件中的 ionViewWillLeave 记录失败

ionViewWillEnter() 
  console.log('ionViewWillEnter');  // <- In console when entering

ionViewWillLeave() 
  console.log('ionViewWillLeave');  // <- Not in console when leaving

无法弄清楚为什么不再打印ionViewWillLeave。任何帮助表示赞赏。

---

app-routing.module.ts 中的路由

const routes: Routes = [
   path: '', loadChildren: './tabs/tabs.module#TabsPageModule' ,
   path: 'chats', loadChildren: './chats.module#ChatsPageModule' ,
...

在 TS 文件中记录 ionViewWillLeave 成功

ionViewWillEnter() 
  console.log('ionViewWillEnter');  // <- In console when entering

ionViewWillLeave() 
  console.log('ionViewWillLeave');  // <- In console when leaving

【问题讨论】：

ionViewWillLeave / ionViewDidLeave 是否被触发？

找到解决方案了吗？

@Jonathan 当我为该特定构建应用重大更改时，我的问题得到了解决。您是否面临类似的问题？

【参考方案1】：

解决我们的问题

对标签的重大更改4.0.0-beta.18 (2018-12-13)

在tab-router中停止使用outlet/component，现在我们直接将子页面放置在标签路径中。

  path: 'tabs',
  component: TabsPage,
  children: [
    
      path: 'home',
      children: [
        
          path: '',
          loadChildren: '../home/home.module#HomePageModule'
        ,
        
          path: 'chats'
          children: [
          
            path: '',
            loadChildren: '../chats/chats.module#ChatsPageModule'
          
        ]
      ,
...