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

Question

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

我们将路线从 app-routing.module.ts 更改为 tabs.router.module.ts 以获得 Ionic 4 应用程序中标签栏的完整视图。这些路线完美无缺。
当路由在 app-routing.module.ts 时，ionViewWillLeave 总是在离开页面时触发（并关闭当前 Observables）。现在离开页面时不会触发 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 不再打印了。感谢任何帮助。

应用中的路由-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
}

Answer 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'
          }
        ]
      },
...

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

How to trigger ionViewWillLeave in Ionic 4 with route in tabs.router.module

ionic-framework

ionic4

angular-lifecycle-hooks