Question

我想这样配置我的路由：

const routes: Routes = [
    {
        path: ':angebotsNummer',
        loadChildren: './uebersicht/uebersicht.module#UebersichtModule',
        resolve: { angebotReadModel: AngebotReadModelResolver },
        children: [
            {   path: 'konditionen',
                loadChildren: './konditionen/konditionen.module#KonditionenModule',
            }
        ]
    }
]

这将导致子网址:angebotsNummer/konditionen

这样做，角度告诉我： Error: Invalid configuration of route ':angebotsNummer': children and loadChildren cannot be used together

所以这行不通。如果有的话，我该如何懒惰地加载有角的子路线？

Answer 1

在这种情况下，您可以将该配置添加到惰性模块路由（Uebersicht-routing.module.ts）

const routes: Routes = [
{
    path: '',
    children: [
        {   path: 'konditionen',
            loadChildren: './konditionen/konditionen.module#KonditionenModule',
        }
    ]
}]

并删除您拥有的孩子部分：

const routes: Routes = [
    {
        path: ':angebotsNummer',
        loadChildren: './uebersicht/uebersicht.module#UebersichtModule',
        resolve: { angebotReadModel: AngebotReadModelResolver }
    }]

Answer 2

如果您有

    loadChildren: './uebersicht/uebersicht.module#UebersichtModule',

然后在该模块中有一个内部路由器

component: UbersichtComponent

组件是能够承载子代的组件，loadChildren将您路由到嵌套模块，而组件加载器是能够承载自己的子代的组件

Answer 3

您可以按照以下步骤操作：

const routes: Routes = [
    {
        path: ':angebotsNummer',
        component: 'UebersichtComponent',
        resolve: { angebotReadModel: AngebotReadModelResolver },
        children: [
            {   path: 'konditionen',
                loadChildren: () => import('./+konditionen/konditionen.module').then(m => m.KonditionenModule),
            }
        ]
    }
]

如何懒加载子路由？

3 个答案: