Angular 13：命名插座的延迟加载答案

【问题标题】：Angular 13: lazy loading of named outletsAngular 13：命名插座的延迟加载
【发布时间】：2022-07-21 22:55:20
【问题描述】：

我想要什么

我想路由到 /edit/foo 并延迟加载正确的模块。

我得到了什么

当我尝试调用 /edit/foo 时出现错误：

错误：未捕获（承诺中）：错误：无法匹配任何路由。 URL 段：'edit/foo'

我有什么：

我有一个带有两个路由器插座的组件：

<!-- vertical-splitscreen.component.html -->

<div class="container-fluid m-0 p-0">
  <div class="row m-0 p-0">
    <div class="col-12 col-md-7 m-0 p-0">
      <router-outlet name="left"></router-outlet>
    </div>
    <div class="col-12 col-md-5 m-0 p-0">
      <router-outlet name="right"></router-outlet>
    </div>
  </div>
</div>

我还有一个延迟加载的根树：

/* app-routing.module.ts */

const routes: Routes = [
  {
    path: '',
    redirectTo: '/edit',
    pathMatch: 'full'
  },
  {
    path: 'edit',
    loadChildren: () => import('./routes/edit-routing.module').then(m => m.EditRoutingModule),
    canActivate: [AuthGuard],
  },
];

/* edit-routing.module.ts */

const routes: Routes = [
  {
    path: '',
    component: VerticalSplitscreenComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('../modules/preview/preview.module').then(m => m.PreviewModule),
        outlet: 'left',
      },
      {
        path: '',
        loadChildren: () => import('../modules/edit-form/edit-form.module').then(m => m.EditFormModule),
        outlet: 'right',
      },
    ],
  }
];

/* edit-form-routing.module.ts */

const routes: Routes = [
  {
    path: 'foo',
    component: EditFormComponent,
  },
];

什么让我困惑

当我删除插座的名称“right”时，它可以工作。检查以下更改：

在vertical-splitscreen.component.html中

<router-outlet name="right"></router-outlet>

变成

<router-outlet></router-outlet>

并在edit-routing.module.ts 行

outlet: 'right',

必须删除。

结论和问题

实际上它应该可以工作，但它没有，因为有一个命名的插座。那么，有什么建议或解决方法可以让它发挥作用吗？

【问题讨论】：

标签： angular routes lazy-loading angular13

【解决方案1】：

您正在导入 EditRoutingModule 而不是 EditModule

应该是：

/* app-routing.module.ts */

const routes: Routes = [
  {
    path: '',
    redirectTo: '/edit',
    pathMatch: 'full'
  },
  {
    path: 'edit',
    loadChildren: () => import('./routes/edit.module').then(m => m.EditModule),
    canActivate: [AuthGuard],
  },
];

并确保在EditModule 中加载EditRoutingModule

【讨论】：

直接导入“EditRoutingModule”和有一个加载“EditRoutingModule”的父“EditModule”有什么区别？
嗯，是的，我想你是对的

【解决方案2】：

https://angularversion14.blogspot.com/2022/07/lazy-loading.html

const 路由：Routes = [{path:'a',loadChildren:()=>import('./moduleb/module').then(m=>m.Modulebmodule)}, {path:'b',loadChildren:()=>import('./moduleb/moduleb.module').then(m => m.ModulebModule) },];

【讨论】：

欢迎来到 Stack Overflow；这似乎是指向您自己博客的链接。请查看help center，了解如何发布附属内容的链接以避免看起来像垃圾邮件发送者。 Stack Overflow 要求明确披露与您发布的链接的任何隶属关系。