Angular ION标签从子对象中加载页，保留父对象的S内容

我假设你有:

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

据我所知，当您从HomePage导航到UserTrainerViewPage时，您实际上是leaving导致ionic 标签条消失的TabsPage上下文(当working with tabs in ionic时).

因此，try 修改您的goToUserTrainerView方法，使路径中的/tabs/前缀使用navigate，以确保您保持在TabsPage上下文中.

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

由于您已经在tabs.module.ts中为UserTrainerViewPage定义了路由，因此您不需要在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中删除冗余路由.

一些额外的判断:

确保在导航方法中使用绝对路径.

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

还要确保您的user-trainer-view页与您的选项卡页加载在相同的<ion-router-outlet>页内.这样，选项卡栏应该保持可见.

<ion-router-outlet></ion-router-outlet>

在导航到第user-trainer-view页时，查看Ionic生命周期事件以查看是否有影响选项卡栏可见性的因素可能会很有帮助.

ionViewWillEnter() {
  console.log('Page is about to enter');
}
ionViewDidEnter() {
  console.log('Page has entered');
}

判断是否有任何可能隐藏选项卡栏的css样式.