时间戳

首页 > 解决方案 > Angular Ionic 应用程序中完全两个不同的选项卡具有不同的路由

angular - Angular Ionic 应用程序中完全两个不同的选项卡具有不同的路由

问题描述

我试图在 Angular Ionic 应用程序上获得两个完全不同的选项卡菜单。我的应用程序底部已经有标签。

第一个菜单选项卡

仪表板 - 搜索 - 收件箱 - 个人资料

我需要创建第二个菜单选项卡：

仪表板 - 游戏 - 聊天 - 联系

我希望在这两种情况下都拥有相同的仪表板。

在我的选项卡路由模块中：

    const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tabs',
        loadChildren: () => import('../tabs/tabs.module').then( m => m.TabsPageModule)
      },
      {
        path: 'dashboard',
        loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardPageModule)
      },
      {
        path: 'search',
        loadChildren: () => import('../search/search.module').then(m => m.SearchPageModule)
      },
      {
        path: 'inbox',
        loadChildren: () => import('../inbox/inbox.module').then(m => m.InboxPageModule)
      },
      {
        path: 'profile',
        loadChildren: () => import('../profile/profile.module').then(m => m.ContactPageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/about',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/about',
    pathMatch: 'full'
  }
];

选项卡 html 页面

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="about">
      <ion-icon name="person-circle-outline"></ion-icon>
      <ion-label>Dashboard</ion-label>
    </ion-tab-button>
    
    <ion-tab-button tab="tabs">
      <ion-icon name="play-outline"></ion-icon>
      <ion-label>Search</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tabs">
      <ion-icon name="albums"></ion-icon>
      <ion-label>Index</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="blog">
      <ion-icon name="albums-outline"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

我很难为第二种类型的选项卡定义路由。

Angular 中是否可以有两个完全不同的选项卡？如果是的话，如果您能帮助我进行路由或任何非常感谢的提示，我将不胜感激。

标签： angularionic-framework

解决方案

推荐阅读