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

Question

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

我们将路由从 app-routing.module.ts 更改为 tabs.router.module.ts 以获得 Ionic 4 应用程序中标签栏的完整 View 。这些路线完美无缺。
当路由在 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)

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

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