Ionic 7 与 Angular 独立组件：构建高效标签页路由的实践指南

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'places',
    pathMatch: 'full',
  },
  {
    path: 'auth',
    loadComponent: () => import('./auth/auth.page').then( m => m.AuthPage)
  },
  {
    path: 'places',
    loadChildren:()=>import('./places/places.routing').then(m=>m.routesPlaces) // 加载子路由配置
  },
  // ... 其他路由
];

import { Routes } from "@angular/router";
import { PlacesPage } from "./places.page"; // 这里的导入路径可能需要调整，假设是相对路径

export const routesPlaces :Routes=[
  {
    path:'',
    loadComponent: () => import('../places/places.page').then( m =>m.PlacesPage), // 这里使用了 loadComponent
    children :[
      {
        path: 'tabs', // 额外的 'tabs' 路径层级
        component: PlacesPage, // 这里又指定了 PlacesPage
        children: [
          {
            path: 'discover',
            children: [
              {
                path: '',
                loadChildren: () => import('./discover/discover.page').then(m => m.DiscoverPage) // 错误地使用 loadChildren
              },
              // ...
            ]
          },
          {
            path: 'offers',
            children: [
              {
                path: '',
                loadChildren: () => import('./offers/offers.page').then(m => m.OffersPage) // 错误地使用 loadChildren
              },
              // ...
            ]
          },
          {
            path: '',
            redirectTo: '/places/tabs/discover',
            pathMatch: 'full'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/places/tabs/discover',
        pathMatch: 'full'
      }
    ]
  }
]

import { Routes } from "@angular/router";
import { PlacesPage } from "../places/places.page"; // 确保路径正确

export const routesPlaces :Routes=[
  {
    path:'', // 当访问 /places 时，加载 PlacesPage
    component: PlacesPage, // PlacesPage 包含 ion-tabs 和 ion-router-outlet
    children: [
      {
        path: '', // 默认重定向到 discover 标签页
        pathMatch: 'full',
        redirectTo: 'discover',
      },
      {
        path: 'discover', // 对应 discover 标签页
        children: [
          {
            path: '', // 访问 /places/discover 时，加载 DiscoverPage
            loadComponent: () => import('../places/discover/discover.page').then(m => m.DiscoverPage)
          },
          {
            path: ':placeId', // 访问 /places/discover/:placeId 时，加载 PlaceDetailPage
            loadComponent: () => import('../places/discover/place-detail/place-detail.page').then(m => m.PlaceDetailPage)
          }
        ]
      },
      {
        path: 'offers', // 对应 offers 标签页
        children: [
          {
            path: '', // 访问 /places/offers 时，加载 OffersPage
            loadComponent: () => import('../places/offers/offers.page').then((m) => m.OffersPage),
          },
          {
            path: 'new', // 访问 /places/offers/new 时，加载 NewOfferPage
            loadComponent: () => import('../places/offers/new-offer/new-offer.page').then(m => m.NewOfferPage)
          },
          {
            path: 'edit/:placeId', // 访问 /places/offers/edit/:placeId 时，加载 EditPage
            loadComponent: () => import('../places/offers/edit/edit.page').then(m => m.EditPage)
          },
          {
            path: ':placeId', // 访问 /places/offers/:placeId 时，加载 OfferBookingsPage
            loadComponent: () => import('../places/offers/offer-bookings/offer-bookings.page').then(m => m.OfferBookingsPage)
          }
        ]
      }
    ],
  },
  // 这里的重定向可能与上方的默认重定向冲突或冗余，需根据实际需求决定是否保留
  // 如果希望 /places 根路径直接跳转到 /places/discover，则上方 children 中的 redirectTo 足够
  // 如果希望 /places/tabs 也能重定向，则需要更复杂的逻辑，但通常不需要 'tabs' 这一层
  {
   path: '', // 如果 /places 的父路由是 ''，这个重定向可能指向 /places/tabs/discover
   redirectTo: '/places/tabs/discover', // 注意这里的路径，如果 'tabs' 层级不存在，会失败
   pathMatch: 'full'
  }
]

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>places</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">places</ion-title>
    </ion-toolbar>
  </ion-header>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="discover"> <!-- tab 属性与路由 path 匹配 -->
      <ion-icon name="search"></ion-icon>
      <ion-label>Discover</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="offers"> <!-- tab 属性与路由 path 匹配 -->
      <ion-icon name="card"></ion-icon>
      <ion-label>Offers</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

<!-- 重要的：这里需要一个 ion-router-outlet 来渲染子路由内容 -->
<ion-router-outlet></ion-router-outlet>

</ion-content>