Ionic 离子选项卡-从保留父项内容的子项加载页面

wooyq4lh 于 2023-11-15 发布在 Ionic

关注(0)|答案(1)|浏览(164)

我在一个使用Ion Tab的Angular应用程序中遇到了一个路由问题。我的应用程序在Ion Tab中有一个“主页”选项卡，我希望当用户单击“主页”选项卡中的某个项目时，允许导航到不同的页面。
我的路由结构如下：
在我的“主页”页面，我有一个卡列表，我希望当用户点击一张卡，他们被重定向到一个“用户培训师视图”页面与特定的ID。
“主页”选项卡在离子选项卡内，但当我从主页导航到“用户-培训师-视图”时，离子选项卡栏从视图中消失。
以下是我如何处理我的“家”内的导航

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

字符串
以下是我的路由定义：
在离子选项卡模块（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 { }

型
当我从主页导航到“user-trainer-view”页面时，我的路由配置出现了什么问题，导致Ion选项卡栏消失？如何解决此问题并保持Ion选项卡栏可见？
HomePage.html

<ion-header [translucent]="true">
  <!-- Header content here -->
</ion-header>

<ion-content [fullscreen]="true">
  <div class="flexTemplate" style="overflow: scroll;">
    <h3 class="textTitle">Your subscribers</h3>

    <div #cards>
      <ion-card *ngFor="let cardData of cardDataArray"
        (click)="goToUserTrainerView(cardData.id)" class="userCard">
        <div class="pholderImg" style="margin-left: 5px;">
          <img src="{{cardData.imgUri}}">
        </div>
        <ion-card-header>
          <ion-card-title>{{cardData.username}}</ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
  </div>
  
    
</ion-content>

型

ionic-framework

来源：https://stackoverflow.com/questions/77380039/ion-tabs-load-a-page-from-a-child-preserving-the-parents-content

1条答案

按热度按时间

vxqlmq5t1#

我假设你有：

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方法，以在使用navigate的路径中保留/tabs/前缀，以确保您保持在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样式可能隐藏标签栏。

赞(0）回复(0）举报 2023-11-15

我来回答

Ionic 离子选项卡-从保留父项内容的子项加载页面

1条答案

相关问题

热门标签

最新问答