Angular 15独立组件下Ionic 7的子路由配置方法咨询

不需要把所有路由都堆在app.routes.ts里，完全可以像非独立组件模式那样拆分到各个模块的路由文件中，具体操作如下：

1. 为独立组件创建专属路由文件 #

以Home模块为例，新建home.routing.ts，在里面定义该模块的路由规则（包括你需要的重定向逻辑）：

import { Routes } from '@angular/router';
import { HomePage } from './home.page';
import { IntroductionPage } from './introduction/introduction.page';

export const homeRoutes: Routes = [
  {
    path: 'home',
    component: HomePage,
    children: [
      // 实现 /home 重定向到 /home/introduction
      { path: '', redirectTo: 'introduction', pathMatch: 'full' },
      { path: 'introduction', component: IntroductionPage }
    ]
  }
];

2. 在主路由文件中合并拆分的路由 #

打开app.routes.ts，导入各模块的路由数组，通过展开运算符合并到主路由配置中：

import { Routes } from '@angular/router';
import { homeRoutes } from './home/home.routing';
// 其他模块路由也可按此方式导入，比如 aboutRoutes、profileRoutes 等

export const appRoutes: Routes = [
  // 展开Home模块的路由
  ...homeRoutes,
  // 其他模块路由依次展开
  // ...aboutRoutes,
  
  // 全局重定向和通配路由
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', redirectTo: 'home' }
];

3. 确保独立组件的配置正确 #

每个页面组件需要开启standalone: true，并导入必要的模块（比如IonicModule、RouterModule），以HomePage为例：

import { Component } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
  standalone: true,
  imports: [IonicModule, RouterModule]
})
export class HomePage {}

IntroductionPage等子页面组件也需要做同样的配置。

4. 在启动文件中注入路由 #

在main.ts中通过provideRouter提供合并后的主路由配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app/app.component';
import { appRoutes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes),
    IonicModule.forRoot()
    // 其他必要服务提供者
  ]
});

这种方式和非独立组件模式下的home-routing.module.ts作用完全一致，只是去掉了NgModule的包裹，改用纯路由数组的方式拆分和合并，更贴合独立组件的轻量化特性。

内容的提问来源于stack exchange，提问作者du7ri