首页 文章

如何在Angular中结合使用Lazy Loding和参数化路由

提问于
浏览
0

我目前有一个工作的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

Here is my issue because I don't know where I can use my parameterized routes now.

为了完整起见,我的子路由器看起来像这样:

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 { }

1 回答

  • 0

    对于此设置,您可以使用子路径重新添加参数 .

    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{}
    

相关问题