如何延迟加载 children 路由？

Question

我想这样配置我的路由：

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

这将导致 child url :angebotsNummer/konditionen

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

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

Answer 1

如果你有

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

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

component: UbersichtComponent

组件是能够携带子组件的组件，loadChildren 将您路由到嵌套模块，但是 component-loader 是能够容纳自己的子组件的组件

Answer 2

在这种情况下，您将在惰性模块路由中添加该配置 (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 3

您可以按如下方式操作：

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

如何延迟加载 children 路由？

How to lazy load children routes?

lazy-loading

angular-routing

angular