Ionic 4 start选项卡项目生命周期挂钩断开

Question

Step1：

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

一切正常。

步骤2:检查当前路由：

//START: app-routing.module.ts：

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

            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：

步骤:3在内部为构造函数、ionViewWillEnter、ionViewDidEnter添加console.log

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

<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中添加一个back按钮再次测试:结果是相同的，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>

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

请提前help...thanks

Answer 1

只为有同样问题的人准备。事实证明，您需要在tab1页面中使用this.navController.navigateRoot('/some-route')。在initPage中，你需要发出同样的命令，即this.navController.navigateRoot('/tabs/tab1')；initPage to this URL：https://www.joshmorony.com/using-angular-routing-with-ionic-4/