Angular Ionic 4开始选项卡项目生命周期挂钩已断开

步骤1：

一切正常

步骤2：检查当前路线：

//开始：app-routing.module.ts：

ionic start stacktabs tabs --type=angular
ionic cordova platform add android
ionic cordova run android --prod

   path: '',
   loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)

//结束：app-routing.module.ts：

ionic start stacktabs tabs --type=angular
ionic cordova platform add android
ionic cordova run android --prod

   path: '',
   loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)

//开始：tabs-routing.module.ts：

ionic start stacktabs tabs --type=angular
ionic cordova platform add android
ionic cordova run android --prod

   path: '',
   loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)

//结束：tabs-routing.module.ts：

ionic start stacktabs tabs --type=angular
ionic cordova platform add android
ionic cordova run android --prod

   path: '',
   loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)

步骤：3为构造函数、ionViewWillEnter、ionViewDidEnter添加console.log

            const routes: Routes = [
            {
            path: 'tabs',
                component: TabsPage,
                children: [
                 {
                    path: 'tab1',
                    children: [
                  {
                    path: '',
                    loadChildren: () =>
                      import('../tab1/tab1.module').then(m => m.Tab1PageModule)
                  }
                ]
              },
              {
                path: 'tab2',
                children: [
                  {
                    path: '',
                    loadChildren: () =>
                      import('../tab2/tab2.module').then(m => m.Tab2PageModule)
                  }
                ]
              },
              {
                path: 'tab3',
                children: [
                  {
                    path: '',
                    loadChildren: () =>
                      import('../tab3/tab3.module').then(m => m.Tab3PageModule)
                  }
                ]
              },
              {
                path: '',
                redirectTo: '/tabs/tab1',
                pathMatch: 'full'
              }
            ]
          },
          {
            path: '',
            redirectTo: '/tabs/tab1',
            pathMatch: 'full'
          }
        ];  

添加新页面：initPage

tabs.page.ts
tab1.page.ts
tab2.page.ts

Re-run and everythings works as expected with the following console.log info:

            Inside tabs.page.ts constructor()....
            Inside tab1.page.ts constructor()....
            Inside tab1.page.ts ionViewWillEnter()....
            Inside tab1.page.ts ionViewDidEnter()....
            Inside tabs.page.ts ionViewWillEnter()....
            Inside tabs.page.ts ionViewDidEnter()....

Press tab2:
            Inside tab2.page.ts constructor()....
            Inside tab2.page.ts ionViewWillEnter()....
            Inside tab2.page.ts ionViewDidEnter()....

Press tab1:

    Inside tab1.page.ts ionViewWillEnter()....
    Inside tab1.page.ts ionViewDidEnter()....

检查app-routing.module.ts

ionic g page initPage

步骤4： tab1.page.html中的Add-ion按钮将路由到initPage：

    const routes: Routes = [
      {
        path: '',
        loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
      },
      {
        path: 'init-page',
        loadChildren: () => import('./init-page/init-page.module').then( m => m.InitPagePageModule)
      }
    ];

通过在initPage内添加后退按钮再次测试： 结果相同，tab1页面模块未启动

Inside tabs.page.ts ionViewWillEnter()....
Inside tabs.page.ts ionViewDidEnter()....

环境：

this.navController.navigateRoot('/tabs/tab1');
this.router.navigateByUrl('/tabs/tab1');

---

请帮助…提前感谢有同样问题的人。事实证明，您需要使用

---

这个.navController.navigateRoot（“/some route”）位于tab1页面内。及

---

在initPage中，您需要发出相同的命令，即this.navController.navigateRoot（'/tabs/tab1'）；

---

归功于这个URL:

你写了“一切都正常”。那么，您的问题是什么呢？抱歉，Alexander Trakhimenok，使用堆栈编辑器时遇到问题。我假设在从tab1导航到tab1后，当您从“初始化页面”返回时，不会触发tab1上的“离子”事件。如果你进入“初始页面”，然后点击“重新加载”，然后点击“向上”按钮，它们是否被触发？据我所知，当你向前导航时，你不会留下一页。为了传达变化，我通常使用具有可观察属性的服务或NgRX存储。谢谢Alex，请与我们分享一些示例代码。我没想到在Ionic 4中执行简单的路由返回时会需要任何事件处理。再次感谢！这个.navController.navigateRoot（）使它到处都能工作！这个博客也很有用。