[英]How to lazy load nested routes for auxiliary router-outlet in Angular
I have two router-outlet components in my app component. 我的app组件中有两个路由器插座组件。 How can I successfully lazy-load the nested route which is secondary router-outlet?
如何成功延迟加载作为辅助路由器插座的嵌套路由?
I have the following routes in the MerchandiseListComponent, this component loads just fine: 我在MerchandiseListComponent中有以下路由,这个组件加载得很好:
const routes: Routes = [
{
path: "",
component: MerchandiseListComponent,
data: { animation: "MerchandiseListPage" },
children: [
{
path: ":id/edit",
outlet: "modal",
loadChildren:
"./merchandise-dialog-container/merchandise-dialog-container.module#MerchandiseDialogContainerModule"
},
{
path: "new",
outlet: "modal",
loadChildren:
"./merchandise-dialog-container/merchandise-dialog-container.module#MerchandiseDialogContainerModule"
}
]
}
];`
Here are routes for my lazy-loaded module merchandise-dialog-container.module: 这是我的懒惰加载模块商品对话框 - 容器模块的路由:
const routes: Routes = [
{
path: "",
children: [
{
path: ":id/edit",
outlet: "modal",
component: MerchandiseDialogContainerComponent
},
{
path: "new",
outlet: "modal",
component: MerchandiseDialogContainerComponent
}
]
}
];
The problem when the MerchandiseListComponent
is loaded, none of the lazy-loaded routes are loaded, it just defaults back to the catch-all
path. 加载
MerchandiseListComponent
时,没有加载任何延迟加载的路由,它只是默认返回到catch-all
路径。
You can't lazy load a component. 您不能延迟加载组件。 Angular's lazy loading works at module level.
Angular的延迟加载在模块级别工作。 That means, you can lazy load a module, through a route.
这意味着,您可以通过路径延迟加载模块。
const routes: Routes = [
{
path: "",
children: [
{
path: ":id/edit",
outlet: "modal",
loadChildren: "/src/app/location_to_module#MerchandiseDialogContainerModule"
},
{
path: "new",
outlet: "modal",
loadChildren: "/src/app/location_to_module#MerchandiseDialogContainerModule"
}]
}];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.