如何在一个应用程序中使用选项卡和页面？

Question

是否可以在页面中使用标签？

我做了一个example。它的结构如下：

• main（页面）
• tabs（作为容器使用）
• ---> app-routing.module.ts（标签路由）
• ---> home（标签）
• ---> contacts（标签）
• ---> details（标签）
• ---> about（标签）

如果我使用制表符作为默认路由，一切正常（app-routing.module.ts）。

const routes: Routes = [
  // { path: '', loadChildren: './main/main.module#MainPageModule' },
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
];

如果我在主页使用默认路由，那么切换到标签时会出现错误（在app-routing.module.ts中）。

const routes: Routes = [
  { path: '', loadChildren: './main/main.module#MainPageModule' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
];

core.js:9110 ERROR 错误：未捕获（在承诺中）：错误：无法匹配 任何路线。 URL 段：'tabs/home' 错误：无法匹配任何路由。 URL 段：'tabs/home'

如何在一个应用程序中使用选项卡和页面？

Answer 1

你需要添加

RouterModule.forChild([
      {
        path: '',
        component: TabsPage
      }
    ])

到导入部分中的 tabs.module.ts。 否则路由器不知道要渲染 Tab Module 的哪个页面