Ionic 4 开始选项卡项目生命周期挂钩已损坏

Question

第一步：

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

一切正常。

第 2 步：检查当前路由：

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

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

//END: app-routing.module.ts:

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

            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'
          }
        ];  

// END: tabs-routing.module.ts:

Step: 3 在console.log里面添加constructor, ionViewWillEnter, ionViewDidEnter

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()....

添加新页面：initPage

ionic g page initPage

检查 app-routing.module.ts

    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)
      }
    ];

第 4 步： 在 tab1.page.html 中添加 ion-button 将路由到 initPage：

<ion-button expand="full" (click)="gotoInitPage()">Go to InitPage</ion-button>

gotoInitPage()
{
this.navController.navigateForward('/init-page');
}

initPage 显示没有问题。

第 5 步： 在 init-page.page.html 中添加 ion-button 将路由回标签页：

<ion-button expand="full" (click)="backToTabsPage()">Back to TabsPage</ion-button>

backToTabsPage()
{
this.navController.navigateForward('/tabs/tab1');
}

注意：底部标签按钮和 tab1 页面显示在视图中，但来自 chrome 调试器：

tab1 模块根本没有启动，即只有 tabs.page.ts 被执行：

只显示标签页日志

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

通过在 initPage 中添加后退按钮再次测试： 结果是一样的，tab1 页面模块没有启动。

<ion-header>
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
           <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
        </ion-buttons>
        <ion-title>InitPage</ion-title>
    </ion-toolbar>
</ion-header>

我在 initPage 内尝试了不同的路由方法，但没有成功：

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

环境：

        Ionic CLI                     : 5.4.16 
        Ionic Framework               : @ionic/angular 5.0.4
        @angular-devkit/build-angular : 0.803.25
        @angular-devkit/schematics    : 8.3.25
        @angular/cli                  : 8.3.25
        @ionic/angular-toolkit        : 2.2.0

        Cordova:
        Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
        Cordova Platforms : android 8.1.0
        Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

        Utility:
        cordova-res : 0.8.1
        native-run  : 0.3.0

        System:
        Android SDK Tools : 26.1.1 (C:\Users\louie\AppData\Local\Android\Sdk)
        NodeJS            : v12.14.0 (D:\Program Files\nodejs\node.exe)
        npm               : 6.13.4
        OS                : Windows 10

请帮助...提前致谢

Answer 1

仅针对遇到相同问题的人。原来你需要使用 tab1 页面内的 this.navController.navigateRoot('/some-route')。和 在 initPage 中，您需要发出相同的内容，即 this.navController.navigateRoot('/tabs/tab1'); 归功于此 URL：https://www.joshmorony.com/using-angular-routing-with-ionic-4/