Ion 选项卡 - 从子级加载页面并保留父级内容

Question

我在使用 Ion Tabs 的 Angular 应用程序中面临路由问题。我的应用程序在 Ion 选项卡中有一个“主页”选项卡，我希望当用户单击“主页”选项卡中的某个项目时允许导航到不同的页面。

我的路由结构如下：

在我的“主页”页面中，我有一个卡片列表，我希望当用户单击卡片时，他们会被重定向到具有特定 ID 的“用户培训师视图”页面。

“主页”选项卡位于 Ion 选项卡内，但是当我从主页导航到“用户培训师视图”时，Ion 选项卡栏从视图中消失。

这是我在“家”中处理导航的方式

goToUserTrainerView(id: any) {
  this.router.navigate(['tabs/user-trainer-view', id]);
}

这是我的路线定义：

在 Ion Tabs 模块 (tabs.module.ts) 中：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('../trainers/home/home.module').then((m) => m.HomePageModule),
      },
      {
        path: 'trainer-user-view/:id',
        loadChildren: () => import('../trainers/user-trainer-view/user-trainer-view.module').then((m) => m.UserTrainerViewPageModule),
      }

    
      
    ],

  },
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full',
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabsPageRoutingModule { }

在主路由模块（app-routing.module.ts）中：

...{
  path: 'user-trainer-view/:id',
  loadChildren: () => import('./trainers/user-trainer-view/user-trainer-view.module').then((m) => m.UserTrainerViewPageModule),
}...

我的路由配置有什么问题导致当我从主页导航到“用户培训师视图”页面时 Ion 选项卡栏消失？如何解决这个问题并保持 Ion Tabs 栏可见？

Answer 1

我假设你有：

Initial Setup:
App
|__TabsPage
   |__HomePage
      |__Card (OnClick: Navigate to UserTrainerView with ID)
          
Navigation:
App
|__TabsPage
   |__UserTrainerViewPage (with ID, but TabsBar is missing)

据我了解，当您从

HomePage

导航到

UserTrainerViewPage

时，您实际上是离开

TabsPage

上下文，这会导致Ion选项卡栏消失（当在ionic中使用选项卡时）。

因此，请尝试修改您的

goToUserTrainerView

方法，以使用 /tabs/

 在路径中保留 

navigate 前缀，以确保您保持在

TabsPage

上下文中。

goToUserTrainerView(id: any) {
  this.router.navigate(['/tabs/trainer-user-view', id]);
}

既然您已经在

UserTrainerViewPage

中定义了

tabs.module.ts

的路线，那么您不需要在

app-routing.module.ts

中再次定义它。

// Remove this block from app-routing.module.ts
{
    path: 'user-trainer-view/:id',
    loadChildren: () => import('./trainers/user-trainer-view/user-trainer-view.module').then((m) => m.UserTrainerViewPageModule),
}

建议的设置是：

App
|__TabsPage
   |__HomePage
      |__Card (OnClick: Navigate to /tabs/trainer-user-view/{ID})
   |__UserTrainerViewPage (with ID, TabsBar is visible)

更新后

home.ts

：

goToUserTrainerView(id: any) {
  this.router.navigate(['/tabs/trainer-user-view', id]);
}

您的更新

tabs.module.ts

：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('../trainers/home/home.module').then((m) => m.HomePageModule),
      },
      {
        path: 'trainer-user-view/:id',
        loadChildren: () => import('../trainers/user-trainer-view/user-trainer-view.module').then((m) => m.UserTrainerViewPageModule),
      }
    ],

  },
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full',
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabsPageRoutingModule { }

再次从

app-routing.module.ts

中删除多余的路线。