ionViewWillEnter 没有被触发-Ionic 5-Tabs答案

【问题标题】：ionViewWillEnter doesn't get Triggered -Ionic 5-TabsionViewWillEnter 没有被触发-Ionic 5-Tabs
【发布时间】：2021-02-06 03:47:12
【问题描述】：

我的应用程序中有 3 个选项卡，我想从中重定向到另一个页面。即当用户单击选项卡时，它将加载一个列表，我想从中重定向到一个页面（比如 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 后退按钮单击后未触发。有人帮我找出解决方案。在此先感谢

【问题讨论】：

标签： ionic5

【解决方案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>

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

服务类

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() 方法上的相同方法。

【讨论】：