ionic-framework - 如何使用 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不再打印。任何帮助表示赞赏。

---

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
}

Answer 1

解决我们的问题

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

停止在选项卡路由器中使用插座/组件，现在我们直接将子页面放置在选项卡路径中。

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