ionViewWillEnter 不会被触发 -Ionic 5-Tabs

Question

我的应用程序中有 3 个选项卡，我想从中重定向到另一个选项卡 page.i。e 当用户单击选项卡时，它将加载我想重定向到页面的列表（比如X).点击X页面的后退按钮后ionViewWillEnter/DidEnter不起作用。谁能帮我找出解决办法？

App Module Routing 页面 :- 加载名为 UW 的单独模块。

const routes: Routes = [
  {
    path: 'uw',
    loadChildren: () => import('src/app/UW/uw.module').then(m => m.UwModule)
  },
]

UW 模块加载仪表板页面：

const routes: Routes = [
  {
    path: 'dashboard-uw',
    loadChildren: () => import('src/app/UW/pages/dashboard-uw/dashboard-uw.module').then(m => m.DashboardUwPageModule)
  },
  {
    path: '',
    redirectTo: 'dashboard-uw',
    pathMatch: 'full'
  },
]

仪表板页面包含选项卡，在每次单击选项卡时加载单独的页面仪表板路由模块：

const routes: Routes = [
  {
    path: '',
    component: DashboardUwPage,
    children: [
      {
        path: uwconstants.UW_TAB1,
        loadChildren: () => import('src/app/UW/pages/uw-premium/uw-premium.module').then(m => m.UwPremiumPageModule)
      },
      {
        path: uwconstants.UW_TAB2,
        loadChildren: () => import('src/app/UW/pages/uw-invoices/uw-invoices.module').then(m => m.UwInvoicesPageModule)
      },
      {
        path: uwconstants.UW_TAB3,
        loadChildren: () => import('src/app/UW/pages/uw-tat/uw-tat.module').then(m => m.UwTatPageModule)
      },
      {
        path: uwconstants.UW_TAB4,
        loadChildren: () => import('src/app/UW/pages/uw-intermediary/uw-intermediary.module').then(m => m.UwIntermediaryPageModule)
      },
      {
        path: uwconstants.UW_TAB5,
        loadChildren: () => import('src/app/UW/pages/uw-vet-pvet-add-tab/uw-vet-pvet-add-tab.module').then(m => m.UwVetPvetAddTabPageModule)
      },
      {
        path: '',
        redirectTo: uwconstants.UW_TAB1,
        pathMatch: 'full'
      },
    
    ]
  },
  {
    path: '',
    redirectTo: 'uw/dashboard-uw/UW-TAB1',
    pathMatch: 'full'
  },

];

每个选项卡点击加载一个单独的页面，使用这行代码

  public approvePremium(item) {
    this.navctrl.navigateForward([ '/uw/uw-premium-send', { leadCode: item } ])
  }

点击后退按钮，我用的是

 this.navctrl.navigateBack([ 'uw', 'dashboard-uw', 'UW-TAB1' ]);

ionViewWill Enter 后退按钮后不触发click.Some 帮我提前查一下solution.Thanks

Answer 1

通过以下方式更改选项卡路由模块

TabsPageRoutingModule

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

这里我们有三个选项卡 tab1,tab2,tab3 并且 dummy 是 tab1

的子页面

tabsPage.html

<ion-tabs>
  <ion-tab-bar slot="bottom" **id="myTabs"**>
            ----
            ----
  </ion-tab-bar>
</ion-tabs>

从您的第一个选项卡，您可以导航到子页面导航方法。由于隐藏内页上的选项卡是一个已知问题，因此没有直接的方法来隐藏它。所以使用下面的自定义方法。创建服务class并将其添加为常用方法

服务类

public toggleTabsBar(){
 const tabId = document.getElementById('myTabs');
    if (tabId) {
      if (tabId.style.display === 'none') {
        tabId.style.display = 'flex';
      }else{
        tabId.style.display = 'none'
      }
    }
}

在您的子页面中，虚拟页面通过调用 IonViewDidEnter() 上的 toggleTabsBar() 方法隐藏标签栏

虚拟页面

ionViewDidEnter(): void {
    this.toggleTabsBar();
  }

当您从子页面单击后退按钮导航回父页面以显示选项卡时，将调用 IonViewDidEnter() 方法中的相同方法。

ionViewWillEnter 不会被触发 -Ionic 5-Tabs

ionViewWillEnter doesn't get Triggered -Ionic 5-Tabs

ionic5

TabsPageRoutingModule

tabsPage.html

服务类

虚拟页面