如何在 Angular 中结合使用延迟加载和参数化路由

Question

我目前有一个可用的 Angular 4 应用程序，它带有带有变量占位符的参数化路由，即 :zoneId :schemaId :id 。我不想摆脱这些，但现在我们正在将我们的应用程序转换为使用延迟加载，我无法弄清楚这些参数化路由的去向。

目前 app-routing.module.ts（导入到app-module.ts）有

const ROUTES: Routes = [
 {
        path: 'zones/:zoneId/schemas/:schemaId/errands/:id',
        component: ErrandDetailComponent

但我所关注的所有示例都是这样的

https://toddmotto.com/lazy-loading-angular-code-splitting-webpack https://medium.com/@kouipheng.lee/lazy-loading-with-angular-4-29c23792b7f4

似乎让我抹去这条路径并给出一个通用名称并使用需要模块路径的loadChildren 路由器#SomeModuleName 这将使我的代码看起来像这样：

    const ROUTES: Routes = [
     {
            path: 'errandDetailComponent',
            loadChildren: './items/errands/errand-routing.module#ErrandRoutingModule',
            component: ErrandDetailComponent

这是我的问题，因为我现在不知道在哪里可以使用我的参数化路由。

为了完整起见，我的子路由器如下所示：

const errandRoutes: Routes = [
    {
        path: '', // APPARENTLY THIS MUST BE EMPTY FOR LAZY LOADING TO WORK SO CAN'T PUT PARAMETERIZED PATH IN HERE EITHER
        component: ErrandDetailComponent,
        resolve: { errand: ErrandResolver },
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(errandRoutes)
    ],
    declarations: [ErrandRoutingModule],
    exports: [
        RouterModule
    ],
})
export class ErrandRoutingModule { }

Answer 1

对于此设置，您可以使用子路由重新添加参数。

app-routing.module.ts

const ROUTES: Routes = [
 {
      path: 'zones',
      loadChildren: './items/errands/errand-routing.module#ErrandRoutingModule',

errands-routing.module.ts

const errandRoutes: Routes = [
    {
        path: '',
        component: ErrandsComponent,
        children: [{
            path: ':zoneId/schemas/:schemaId/errands/:id',
            component: ErrandDetailComponent,
            resolve: { errand: ErrandResolver },
        }]
    }
];

您只需要一个非常薄的ErrandsComponent 来显示详细信息组件。

errands.component.ts

@Component({
  selector: 'app-errands',
  template: '<router-outlet></router-outlet>',
})
export class ErrandsComponent{}