Angular 页面未加载到离子选项卡中

我正在尝试在我的

ionic 4

应用程序中集成

iontabs

，但是

选项卡

没有显示。我只在屏幕底部看到

离子标签

，没有其他内容。此外，当我尝试单击任何选项卡时，会出现以下错误：

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'offered-services/offered-services'

这是我的

应用程序路由.module.ts

：

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'list',
    loadChildren: () => import('./list/list.module').then(m => m.ListPageModule)
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule)
  },
  {
    path: 'signup',
    loadChildren: () => import('./signup/signup.module').then(m => m.SignupPageModule)
  },
  {
    path: 'offered-services',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) //this loads the tabs
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是我的

tabs.module.ts

：

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';

    import { IonicModule } from '@ionic/angular';

    import { TabsPageRoutingModule } from './tabs-routing.module';

    import { TabsPage } from './tabs.page';
    import { Routes } from '@angular/router';

    const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPage,
        children: [
          {
            path: 'offered-services',
            loadChildren: '../offered-services/offered-services.module#OfferedServicesPageModule'
          },
          {
            path: 'services-cleaning',
            loadChildren: '../services-cleaning/services-cleaning.module#OfferedServicesPageModule#ServicesCleaningPageModule'
          },
          {
            path: 'services-home',
            loadChildren: '../services-home/services-home.module#ServicesHomePageModule'
          },
          {
            path: 'services-laundry',
            loadChildren: '../services-laundry/services-laundry.module#ServicesLaundryPageModule'
          }
        ]
      },
      {
        path: 'offered-services',
        redirectTo: '/tabs/offered-services',
        pathMatch: 'full'
      }
    ];

    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        TabsPageRoutingModule
      ],
      declarations: [TabsPage]
    })
    export class TabsPageModule { }

and this is my `tabs.page.html` :

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="offered-services" (click)="offeredServicesSelected()">
      <ion-icon name="boat"></ion-icon>
      <ion-label>Iron</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="services-laundry" (click)="laundryServicesSelected()">
      <ion-icon name="logo-buffer"></ion-icon>
      <ion-label>Laundry</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="services-cleaning" (click)="cleaningServicesSelected()">
      <ion-icon name="nuclear"></ion-icon>
      <ion-label>Dry Cleaning</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="services-home" (click)="homeServicesSelected()">
      <ion-icon name="bed"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

---

提前感谢。

在主路由器中，您将模块

选项卡的路径定义为

offered-services

在
选项卡
模块中，您将基本路径定义为
选项卡
，子路径定义为
提供的服务
。它变成

tabs/offered-services

这意味着您的完整路径是

offered-services/tabs/offered-services

我不确定这就是您要查找的，您可能需要将
选项卡的父路径设置为
'
。这样，您的路径将如下所示

offered-services/services-laundry 

我已将tabs.module.ts的基本路径更改为“”，但仍然会出现相同的错误。我已经尝试了几乎所有的方法，并且在过去的5个小时里一直坚持使用。我在您的
选项卡.module.ts
上没有看到任何将路由加载到
ngModule
定义中的方法。你应该这样做：
RouterModule.forChild（routes）
@sallu-tech-KinDarBoja是对的，你从来没有将你的路由加载到你的
选项卡
模块中。@KingDarBoja我在ngModule中添加了它，现在点击离子选项卡会显示页面，但是当第一次加载页面时，它仍然是空的。你能告诉我为什么会这样吗`另外，请告诉我，第一次加载页面时，url是：（localhost:8100/提供的服务）。当我单击显示“提供的服务”页面的第一个选项卡时，url变为（localhost:8100/offered services/offered services），然后页面被加载。你能解释一下这种路由行为吗？
offered-services/services-laundry 

/* ... */
    const routes: Routes = [
      {
        path: '',
        component: TabsPage,
        children: [
          {
            path: 'offered-services',
            loadChildren: '../offered-services/offered-services.module#OfferedServicesPageModule'
          },
/* ... */