Angular:延迟加载具有相同路由的多个模块 [英] Angular : Lazy load multiple Modules with the same route

问题描述

我有一个应用，我想延迟加载两个模块 在同一时刻 使用 相同的路由路径.

I have an app where i want to lazy load two modules in the same moment with the same route path.

我的路由模块如下所示:

  {
    path: 'mypath',
    loadChildren: () => HomeModule,
    canLoad: [HomeGuard]
  },

   {
     path: 'mypath',
     loadChildren: () => AdvisorModule,
     canLoad: [AdvisorGuard]
   },

但这会导致只加载第一个

我无论如何都找不到这样做的方法，例如:

i cant' find anyway to do it like this for example :

  {
    path: 'mypath',
    loadChildren: () => HomeModule, advisor module // ??
    canLoad: [// ??]
  },

我不想在另一个中导入其中一个，像这样，只有一个模块会被延迟加载，另一个会自动加载

I don't want also to import one of them in the other , as like this , only one module would be lazy loaded and the other automatically

它是怎么做到的??

推荐答案

你可以像这样重新设计:

You could rework things like this:

const routes: Routes = [
  {
    path: 'mypath/home',
    loadChildren: () => HomeModule,
    canLoad: [HomeGuard]
  },
  {
    path: 'mypath/advisor',
    loadChildren: () => AdvisorModule,
    canLoad: [AdvisorGuard]
  },
]

换句话说，将模块的路由路径移到父模块之外，在这种情况下，我假设它们是adviser"和home"

In other words move the route path to your module outside to the parent module, in this case I assume those are 'adviser' and 'home'

然后使用重定向解决方案和/或像这样的路径开始模块路由:

And then just start in the module routing with a redirect solution and/or a path like so:

首页模块路由:

const routes: Routes = [
  {
    path: '', // <-- in your current solution probably 'home'
    component: HomeParentComponent,
    children: [
      { path: '', redirectTo: 'childOne', pathMatch: 'full' },
      { path: 'childOne', component: HomeChildComponentOne },
    ],
  },
];

顾问模块路由:

const routes: Routes = [
  {
    path: '', // <-- in your current solution probably 'advisor'
    component: AdvisorParentComponent,
    children: [
      { path: '', redirectTo: 'childOne', pathMatch: 'full' },
      { path: 'childOne', component: AdvisorChildComponentOne },
    ],
  },
];

这很好用，您应该能够导航到:

This works nicely, you should be able to navigate to:

'/mypath/home' 并最终在您的 HomeParentComponent 中，带有 HomeChildComponent 一个的路由器出口.

'/mypath/home' and end up inside your HomeParentComponent with router outlet of HomeChildComponent one.

'/mypath/advisor' 并最终在您的 AdvisorParentComponent 中，带有 AdvisorChildComponent 一个的路由器出口.

'/mypath/advisor' and end up inside your AdvisorParentComponent with router outlet of AdvisorChildComponent one.

如果您不希望路由器插座内有子组件，那就更简单了，您只需删除子路由并重定向即可.

In case you don't want a child component inside your router outlet it is even simpler, you can just remove the child routes and redirect.

注意:如果此解决方案不能解决您的问题，请分享有关您的模块路由的更多详细信息，以便我更好地了解您所需的路由配置.

这篇关于Angular:延迟加载具有相同路由的多个模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！