Angular 6 - 延迟加载辅助问题答案

【问题标题】：Angular 6 - Lazy loading auxilary issueAngular 6 - 延迟加载辅助问题
【发布时间】：2018-09-18 18:11:47
【问题描述】：

我需要基于 url 在惰性模块中加载详细信息。所以，我使用了惰性辅助路由。但是，当我使用辅助路由时，我面临以下问题。

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。 URL 段：'lazy/aux1' 错误：无法匹配任何路由。网址段： ApplyRedirects.noMatchError 处的“懒惰/辅助 1” (https://lazy-load-auxilary-b7vpg-e2ax7j.stackblitz.io/turbo_modules/@angular/router@6.1.7/bundles/router.umd.js:1455:20) 在 CatchSubscriber.eval [作为选择器] (https://lazy-load-auxilary-b7vpg-e2ax7j.stackblitz.io/turbo_modules/@angular/router@6.1.7/bundles/router.umd.js:1436:33) 在 CatchSubscriber.error (https://lazy-load-auxilary-b7vpg-e2ax7j.stackblitz.io/turbo_modules/rxjs@6.3.2/internal/operators/catchError.js:48:31) 在 MapSubscriber.Subscriber._error (https://lazy-load-auxilary-b7vpg-e2ax7j.stackblitz.io/turbo_modules/rxjs@6.3.2/internal/Subscriber.js:96:26) 在 MapSubscriber.Subscriber.error (https://lazy-load-auxilary-b7vpg-e2ax7j.stackblitz.io/turbo_modules/rxjs@6.3.2/internal/Subscriber.js:74:18) 在 MapSubscriber.Subscriber._error (https://lazy-load-auxilary-b7vpg-e2ax7j.stackblitz.io/turbo_modules/rxjs@6.3.2/internal/Subscriber.js:96:26) 在 MapSubscriber.Subscriber.error (https://lazy-load-auxilary-b7vpg-e2ax7j.stackblitz.io/turbo_modules/rxjs@6.3.2/internal/Subscriber.js:74:18) 在 MapSubscriber.Subscriber._error (https://lazy-load-auxilary-b7vpg-e2ax7j.stackblitz.io/turbo_modules/rxjs@6.3.2/internal/Subscriber.js:96:26) 在 MapSubscriber.Subscriber.error (https://lazy-load-auxilary-b7vpg-e2ax7j.stackblitz.io/turbo_modules/rxjs@6.3.2/internal/Subscriber.js:74:18) 在 TapSubscriber._error (https://lazy-load-auxilary-b7vpg-e2ax7j.stackblitz.io/turbo_modules/rxjs@6.3.2/internal/operators/tap.js:75:26)

请在下面找到示例链接和复制步骤：

转到示例链接https://stackblitz.com/edit/lazy-load-auxilary-b7vpg-e2ax7j
点击惰性路由链接
然后点击任意一条辅助路由

谁能帮我解决这个问题？

【问题讨论】：

您使用的是哪个版本的 Angular？这是一个已知的issue，似乎直到 Angular v6.1.x 才得到解决。
@Narm：我使用的是 Angular 6.1.7。我只创建了一个最新版本的示例。
在我的第一条评论中的问题链接中查看@kentoj 的答案。您的问题似乎有解决方案。至少，查看您在 StackBlitz 中的代码，您一开始就没有使用“routerLink”正确路由命名的路由器插座。
如果我按照这种方式，url 看起来像 /b/(c//myoutlet:something)。但我只需要显示 /b/c 之类的网址。因此，该解决方案无助于解决我的问题。

标签： angular angular6 router-outlet

【解决方案1】：

你需要做一些改变，你不需要命名你的出口并在路由中提到出口名称

const routes = [
  {
    path: '', component: LazyComponent,
    children: [
      {
        path: 'aux1', component: Aux1Component
      },
      {
        path: 'aux2', component: Aux2Component
      },
      {
        path: 'aux3', component: Aux3Component
      }
    ]
  }
];

<a [routerLink]="['/']">
    back
</a>
&nbsp;
<a routerLink="aux1">
    aux1 route
</a>
&nbsp;

<a [routerLink]="['aux2']">
    aux2 route
</a>
&nbsp;

<a [routerLink]="['aux3']">
    aux3 route
</a>

<router-outlet></router-outlet>

那么您可以使用<a routerLink="aux1"> 或<a [routerLink]="['aux1']">

查看更新stackblitz

【讨论】：

【解决方案2】：

根据您的示例 (https://stackblitz.com/edit/lazy-load-auxilary-b7vpg-e2ax7j)，您只需要几件事：

这些天我一直在阅读很多关于路由的内容，经常回来的是你不能有空路径的惰性路由，所以添加lazy.module路由配置：

 { path: '', redirectTo: 'lazy', pathMatch: 'full' },

然后将你的空惰性路径名修改为'lazy'

 path: 'lazy',

然后正如 cmets 建议的那样，命名的出口有一个特定的使用方式：（应该是第一个路由器链接指令）

[routerLink]="[ { outlets: { aux :['aux1'] }} ]"

你的 stackblitz 现在正在工作

【讨论】：