如何延迟加载子路由？

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

所以这行不通。 如果有的话，我如何以角度延迟加载 childrenroutes？

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),
            }
        ]
    }
]