Angular：如何为StudentModule配置懒加载以包含多路由（含重复组件路由）

嘿，刚接触Angular的话，懒加载这块确实容易绕晕，我来一步步带你把这几个路由迁移到懒加载的StudentModule里，顺便处理那两个指向同一组件的路由~

第一步：修改AppRoutingModule（根路由） #

首先，我们要把原来根路由里的三个student相关路由替换成懒加载入口路由，这样当用户访问/student开头的路径时，才会按需加载StudentModule的代码，优化首屏加载速度。

修改后的app-routing.module.ts代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SchoolComponent } from './school/school.component';

const routes: Routes = [
  {
    path: 'school',
    component: SchoolComponent
  },
  // 懒加载StudentModule的入口路由
  {
    path: 'student',
    // 这里的路径要对应你StudentModule所在的文件位置，别写错哦
    loadChildren: () => import('./student/student.module').then(m => m.StudentModule)
  }
];

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

第二步：配置StudentRoutingModule（子路由） #

接下来，把原来根路由里的三个student子路由移到新建的student-routing.module.ts里。因为父路由已经是student了，所以子路由的路径要做简化：

• 原来的student路径，对应这里的空路径（''）
• 原来的student/view对应view
• 原来的student/view/:id对应view/:id

针对你提到的两个路由指向同一组件的情况，我提供两种实现方式：

方式一：保持原路由结构（分开写）

完全保留你原来的路由逻辑，直接拆分到子路由里：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { StudentComponent } from './student.component';
import { StudentDetailsComponent } from './student-details.component';

const routes: Routes = [
  // 对应原路由：/student
  {
    path: '',
    component: StudentComponent
  },
  // 对应原路由：/student/view
  {
    path: 'view',
    component: StudentDetailsComponent
  },
  // 对应原路由：/student/view/:id
  {
    path: 'view/:id',
    component: StudentDetailsComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class StudentRoutingModule { }

方式二：合并成可选参数路由（更简洁）

如果/student/view和/student/view/:id的逻辑可以在同一个组件里处理（比如无id时显示默认列表，有id时显示对应学生详情），可以把两个路由合并成一个带可选参数的路由：

const routes: Routes = [
  {
    path: '',
    component: StudentComponent
  },
  // 合并后：/student/view 和 /student/view/:id 都匹配这个路由
  {
    path: 'view/:id?',
    component: StudentDetailsComponent
  }
];

在StudentDetailsComponent里，你可以通过ActivatedRoute判断id是否存在，从而处理不同逻辑：

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

constructor(private route: ActivatedRoute) {
  this.route.paramMap.subscribe(params => {
    const studentId = params.get('id');
    if (studentId) {
      // 处理带id的学生详情逻辑
    } else {
      // 处理无id的默认逻辑
    }
  });
}

第三步：确保StudentModule配置正确 #

最后，别忘了在StudentModule里导入StudentRoutingModule，并声明相关组件（注意：这些组件不能再在AppModule里声明，否则会报错）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StudentRoutingModule } from './student-routing.module';
import { StudentComponent } from './student.component';
import { StudentDetailsComponent } from './student-details.component';

@NgModule({
  declarations: [StudentComponent, StudentDetailsComponent],
  imports: [
    CommonModule,
    StudentRoutingModule
  ]
})
export class StudentModule { }

这样就全部搞定啦！现在当用户访问/student、/student/view或/student/view/123时，Angular会自动懒加载StudentModule的代码，完美实现你的需求~

备注：内容来源于stack exchange，提问作者Jithin RS