Question

我的应用程序组件中有两个路由器插座组件。如何成功延迟加载作为辅助路由器出口的嵌套路由？

我在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"
          }
        ]
      }
    ];`

以下是我的延迟加载模块merchandise-dialog-container.module的路线：

    const routes: Routes = [
      {
        path: "",
        children: [
          {
            path: ":id/edit",
            outlet: "modal",
            component: MerchandiseDialogContainerComponent
          },
          {
            path: "new",
            outlet: "modal",
            component: MerchandiseDialogContainerComponent
          }
        ]
      }
    ];

在加载MerchandiseListComponent时没有加载任何延迟加载的路由的问题，它只是默认返回到catch-all路径。

Answer 1

您不能延迟加载组件。 Angular的延迟加载在模块级别进行。这意味着您可以通过路由延迟加载模块。

    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"
        }]
    }];

您还可以看到HERE。

如何在Angular中延迟加载辅助路由器出口的嵌套路由

1 个答案: