Ionic v4嵌套选项卡

时间:2019-03-11 10:00:22

标签: angular ionic-framework ionic4 angular-router

我正在将我的应用程序从v3迁移到v4,并且我具有嵌套的标签。

我无法确定它是否可以正常工作,第一级工作正常,嵌套选项卡的页面可以很好地加载(不加载其子选项卡),但是当我单击其中一个选项卡时报错

ERROR Error: "[object Object]"
     resolvePromise11Angular

就像我在选项卡中输入错误的路线时一样。 这是我的路线

app-routing.module.ts:

const routes: Routes = [
  ...
  { path: 'tab', loadChildren: './pages/main-tabs/main-tabs.module#MainTabsPageModule' },
  ...
];

“主要”标签模块的路线:

const routes: Routes = [
  {
    path: '',
    component: MainTabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: '../tab1/tab1.module#tab1PageModule'
      },
      {
        path: 'tab2',
        loadChildren: '../tab2/tab2.module#tab2PageModule'
      },
      {
        path: 'subTabs',
        loadChildren: '../subTabs/subTabs.module#subTabsPageModule'
      }
    ]
  }
];

subTabs模块中的路由

const routes: Routes = [
  {
    path: '',
    component: ProfilePage,
    children: [
      {
        path: 'subTab1',
        loadChildren: '../subTab1/subTab1.module#subTab1PageModule'
      },
      {
        path: 'subTab2',
        loadChildren: '../subTab2/subTab2.module#subTab2PageModule'
      },
      {
        path: 'subTab3',
        loadChildren: '../subTab3/subTab3.module#subTab3PageModule'
      },
    ]
  }
];

单击子选项卡时出现错误

每个页面都在同一文件夹中。自从我在主选项卡中测试了subTab以来,链接就正确了。

app
  app-routing.module.ts
  pages
    main-tab
       ...
    tab1
       ...
    tab2
       ...
    subTabs
       ...
    subTab1
       ...
    subTab2
       ...
    subTab3
       ...
    subTab2
       ...

ion-tab-button选项卡属性与右侧子代路径的名称相同

1 个答案:

答案 0 :(得分:0)

好的,我解决了这个问题,看来问题出在离子键在整个路线上的导航方式。 如果我在子选项卡上将按钮替换为简单的“ routerlink”,则效果很好。

所以我想我将通过点击事件手动进行导航,并手动激活子标签按钮