Angular 4中如何结合懒加载与参数化路由？原参数路由该放何处？

嘿，别担心，参数化路由和懒加载完全可以兼容，配置逻辑其实和你之前的常规路由思路很像，只是多了一步指向懒加载模块的配置。我给你分两种常见场景拆解说明：

场景1：把完整参数化路由作为懒加载模块的入口 #

如果你想把ErrandDetailComponent所在的模块做成懒加载，直接在根路由（app-routing.module.ts）里保留完整的参数化路径，把原来的component替换成loadChildren就行：

// app-routing.module.ts
const ROUTES: Routes = [
  { 
    path: 'zones/:zoneId/schemas/:schemaId/errands/:id', 
    // Angular 4用SystemJS语法，格式是「模块路径#模块类名」
    loadChildren: './errands/errands.module#ErrandsModule'
  }
];

接着在ErrandsModule对应的路由文件（比如errands-routing.module.ts）里，只需要配置空路径对应组件——因为根路由已经匹配了完整的参数化路径，模块内部只需要处理入口：

// errands-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { ErrandDetailComponent } from './errand-detail.component';

const ERRAND_ROUTES: Routes = [
  { path: '', component: ErrandDetailComponent }
];

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

最后在ErrandsModule里导入这个路由模块：

// errands.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ErrandsRoutingModule } from './errands-routing.module';
import { ErrandDetailComponent } from './errand-detail.component';

@NgModule({
  imports: [CommonModule, ErrandsRoutingModule],
  declarations: [ErrandDetailComponent]
})
export class ErrandsModule {}

场景2：参数化路由是懒加载模块的子路由 #

如果这个参数化路由属于某个更大的懒加载模块（比如ZonesModule），可以先把父路径配置成懒加载，再在子模块里定义参数化路由：

根路由配置：

// app-routing.module.ts
const ROUTES: Routes = [
  { 
    path: 'zones', 
    loadChildren: './zones/zones.module#ZonesModule'
  }
];

然后在ZonesModule的路由文件里定义完整的参数化子路由：

// zones-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { ErrandDetailComponent } from './errands/errand-detail.component';

const ZONE_ROUTES: Routes = [
  { 
    path: ':zoneId/schemas/:schemaId/errands/:id', 
    component: ErrandDetailComponent
    // 如果ErrandDetailComponent还在嵌套的懒加载模块，这里也可以继续用loadChildren
  }
];

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

参数获取方式完全不变 #

不管哪种配置，你在ErrandDetailComponent里获取参数的逻辑和之前一模一样，用ActivatedRoute就能拿到：

// errand-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-errand-detail',
  templateUrl: './errand-detail.component.html'
})
export class ErrandDetailComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 推荐用paramMap订阅参数变化（适合参数可能更新的场景）
    this.route.paramMap.subscribe(params => {
      const zoneId = params.get('zoneId');
      const schemaId = params.get('schemaId');
      const id = params.get('id');
      // 这里写你的业务逻辑
    });

    // 如果参数不会动态变化，也可以直接取snapshot
    // const zoneId = this.route.snapshot.paramMap.get('zoneId');
  }
}

关键注意事项 #

• 根路由必须用RouterModule.forRoot(ROUTES)，懒加载模块的路由一定要用RouterModule.forChild(ROUTES)，别搞混了。
• Angular 4的懒加载语法是loadChildren: '模块路径#模块类名'，和新版本的import()语法不同，千万别写错格式。

这样配置后，你的参数化路由依然能正常工作，同时还实现了模块懒加载，完全不会影响原有功能~

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