如何延遲加載子路由？

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