Question

我正在尝试将ion-tabs集成到我的ionic 4应用中，但没有显示tabs。我仅在屏幕底部看到ion-tabs，仅此而已。而且，当我尝试单击任何选项卡时，它给我以下错误：

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

这是我的app-routing.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，我想将其加载为默认标签：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Services
    </ion-title>
    <div class="ion-padding cart-btn" slot="end">
      <ion-icon style="height:25px; width:25px;" name="cart"></ion-icon>
      <ion-badge id="cart-badge" color="danger">0</ion-badge>
    </div>

  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-card class="welcome-card">
        <img src="../../assets/iron1.jpg" alt="" />
        <ion-card-header>
          <ion-card-subtitle>25$</ion-card-subtitle>
          <ion-card-title id="card-title">Item Washned & Ironed</ion-card-title>
        </ion-card-header>
        <ion-card-content style="display: contents;">
          <ion-item-divider>
            <ion-label class="ion-text-wrap" style="margin-top: 0px;">
              Some description about the service is going to land
              here for user to read and enjoy.
            </ion-label>
          </ion-item-divider>
          <ion-row class="quantity-row">
            <div id="quantity-div">
              <span>
                <ion-icon class="quantity-icons" name="add-circle-outline"></ion-icon>
              </span>
              <span id="quantity">&nbsp;0&nbsp;</span>
              <span>
                <ion-icon class="quantity-icons" name="remove-circle-outline"></ion-icon>
              </span>
            </div>
          </ion-row>
        </ion-card-content>
      </ion-card>

    </ion-item>

    <ion-item>
      <ion-card class="welcome-card">
        <img src="../../assets/iron1.jpg" alt="" />
        <ion-card-header>
          <ion-card-subtitle>25$</ion-card-subtitle>
          <ion-card-title id="card-title">Item Ironed Only</ion-card-title>
        </ion-card-header>
        <ion-card-content style="display: contents;">
          <ion-item-divider>
            <ion-label class="ion-text-wrap" style="margin-top: 0px;">
              Some description about the service is going to land
              here for user to read and enjoy.
            </ion-label>
          </ion-item-divider>
          <ion-row class="quantity-row">
            <div id="quantity-div">
              <span>
                <ion-icon class="quantity-icons" name="add-circle-outline"></ion-icon>
              </span>
              <span id="quantity">&nbsp;0&nbsp;</span>
              <span>
                <ion-icon class="quantity-icons" name="remove-circle-outline"></ion-icon>
              </span>
            </div>
          </ion-row>
        </ion-card-content>
      </ion-card>

    </ion-item>

    <ion-item>
      <ion-card class="welcome-card">
        <img src="../../assets/iron3.jpg" alt="" />
        <ion-card-header>
          <ion-card-subtitle>25$</ion-card-subtitle>
          <ion-card-title id="card-title">Iron Only Dozen</ion-card-title>
        </ion-card-header>
        <ion-card-content style="display: contents;">
          <ion-item-divider>
            <ion-label class="ion-text-wrap" style="margin-top: 0px;">
              Some description about the service is going to land
              here for user to read and enjoy.
            </ion-label>
          </ion-item-divider>
          <ion-row class="quantity-row">
            <div id="quantity-div">
              <span>
                <ion-icon class="quantity-icons" name="add-circle-outline"></ion-icon>
              </span>
              <span id="quantity">&nbsp;0&nbsp;</span>
              <span>
                <ion-icon class="quantity-icons" name="remove-circle-outline"></ion-icon>
              </span>
            </div>
          </ion-row>
        </ion-card-content>
      </ion-card>

    </ion-item>

  </ion-list>
</ion-content>

谢谢。

Answer 1

在主路由器中，您将模块tabs的路径定义为

offered-services

在tabs模块中，您将基本路径定义为tabs，并将子路径定义为offered-services。变成

tabs/offered-services

这意味着您的完整路径是

offered-services/tabs/offered-services

我不确定您要查找的是什么，您可能想将tabs模块的父路径设置为''。这样，您的路径就会像这样

offered-services/services-laundry

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

页面未加载到离子标签中

1 个答案: