Ioni c 4 стартовых вкладки проекта Сломаны крючки жизненного цикла - PullRequest
Новая
       11

Ioni c 4 стартовых вкладки проекта Сломаны крючки жизненного цикла

1 голос
/ 09 марта 2020

Шаг 1: 

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)

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

// START: 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:

Шаг: 3 Добавьте console.log для конструктора, 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, которая будет направлять на 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 expand="full" (click)="backToTabsPage()">Back to TabsPage</ion-button>

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

Примечание: нижняя Кнопка tabs и страница tab1 отображаются для просмотра, но из отладчика chrome:

Модули tab1 вообще не запускаются, ie Выполняются только tabs.page.ts:

Показывать только вкладки журнала страниц 

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

Протестировано снова при добавлении ба кнопка ck внутри 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

Пожалуйста, помогите ... заранее спасибо

1 Ответ

0 голосов
/ 09 марта 2020

Просто для тех, у кого такая же проблема. Оказывается, вам нужно использовать this.navController.navigate Root ('/ some-route') внутри страницы tab1. А внутри initPage вам нужно выполнить то же самое, ie this.navController.navigate Root ('/ tabs / tab1'); Кредит на этот URL: https://www.joshmorony.com/using-angular-routing-with-ionic-4/

...