[英]Angular Lazy loading with multiple child routes
This is something I really shouldn't be stuck on, but I've not really used lazy loading beyond a single route per module. 这是我确实不应该坚持的事情,但是我并没有真正在每个模块的单个路由之外使用延迟加载。
I have a lazy loaded module like so: 我有一个像这样的延迟加载模块:
const appRoutes: Routes = [
...other routes...
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
...other routes...
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { initialNavigation: 'enabled', preloadingStrategy: PreloadAllModules });
Which points to a module which has child routes: 指向具有子路由的模块:
export const routing: ModuleWithProviders = RouterModule.forChild([
{
path: '',
component: RootComponent, pathMatch: 'full', canActivate: [AuthGuardAdmin],
data: {
title: 'Dashboard',
meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
},
children: [
{ path: '', component: HomeComponent, data: { title: 'Dashboard' } },
{ path: 'home', component: HomeComponent, data: { title: 'Dashboard' } },
{ path: 'settings', component: SettingsComponent },
{ path: 'albums', component: AlbumComponent, data: { title: 'Album Management' } },
{ path: 'reviews-admin', component: ReviewAdminComponent, data: { title: 'Reviews' } },
{ path: 'users-admin', component: AlbumComponent, data: { title: 'Users' } },
{ path: 'roles-admin', component: RolesManagmentComponent, data: { title: 'Roles' } },
{ path: 'events-admin', component: EventsManagementComponent, data: { title: 'Events' } },
{ path: 'slider-management', component: SliderManagementComponent, data: { title: 'Slides' } },
{ path: 'galleries', component: GalleryComponent, data: { title: 'Galleries' } },
{ path: 'images', component: ImageFileComponent, data: { title: 'Images' } },
{ path: 'tags', component: TagsComponent, data: { title: 'Tags' } },
{ path: 'about-page', component: AboutPageComponent, data: { title: 'About Page' } },
{ path: 'faq-management', component: FaqManagementComponent, data: { title: 'FAQ Management' } },
{ path: 'blog-management', component: BlogManagementComponent, data: { title: 'Manage Blog Posts' } },
{ path: 'card-management', component: CardManagementComponent, data: { title: 'Manage front page cards' } }
]
}
]);
Problem is that I can't get to the child routes eg dashboard/settings 问题是我无法到达子路线,例如仪表板/设置
This module was a regular module and worked ok, but I am using server side rendering and had a few 3rd party components that use window which lead me to disable SSR for any route containing "dashboard". 这个模块是一个常规模块,可以正常工作,但是我正在使用服务器端渲染,并且有一些使用window的第三方组件使我禁用了任何包含“ dashboard”的路由的SSR。
So my question is, how do I have children on a lazy loaded route? 所以我的问题是,如何让孩子在懒惰的路线上?
Thanks in advance! 提前致谢!
Edit: 编辑:
I tried declaring each path as a lazy module withing the dashboard module, but when I do that I get the error that the component isn't part of an NgModule which is obviously wrong, because it is, so I am missing something. 我尝试将每个路径声明为带有仪表板模块的惰性模块,但是这样做时,我得到一个错误,即该组件不是NgModule的一部分,这显然是错误的,因为它是错误的,所以我缺少了一些东西。 If I add the lazy child component to dashboard declarations I'm told its declared in 2 modules, if I remove it from one I'm told it's in none.... Pulling my hair out now XD 如果我将懒惰的子组件添加到仪表板声明中,则被告知在2个模块中声明了该子组件,如果我将其从一个模块中删除,则被告知该组件不存在。...现在拔头发XD
So it turns out you can't use pathMatch: 'full' on the root, routes... 所以事实证明,您不能在根目录,路由上使用pathMatch:'full'。
path: '',
component: RootComponent, pathMatch:'full', canActivate: [AuthGuardAdmin],
data: {
title: 'Dashboard',
meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
},
children: [
{ path: '', component: HomeComponent, data: { title: 'Dashboard' } },
{ path: 'about-page', component: AboutPageComponent, canActivateChild: [AuthGuardAdmin] },
],
},
became... 成了...
path: '',
component: RootComponent, canActivate: [AuthGuardAdmin],
data: {
title: 'Dashboard',
meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
},
children: [
{ path: '', component: HomeComponent, data: { title: 'Dashboard' } },
{ path: 'about-page', component: AboutPageComponent, canActivateChild: [AuthGuardAdmin] },
],
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.