Angular 6-延迟加载辅助问题

Question

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

  

错误错误：未捕获（承诺）：错误：无法匹配任何路由。   URL段：'lazy / aux1'错误：无法匹配任何路由。网址段：   ApplyRedirects.noMatchError上的'lazy / aux1'   （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）

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

1. 转到示例链接https://stackblitz.com/edit/lazy-load-auxilary-b7vpg-e2ax7j
2. 点击惰性路由链接
3. 然后单击辅助路线中的任何一条

有人可以帮助我解决此问题吗？

Answer 1

You need to make some changes,You don't need to name your outlet and mentioning outlet name in routing

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>

Then you can either use <a routerLink="aux1"> or <a [routerLink]="['aux1']">

see update stackblitz

Answer 2

在您的示例（https://stackblitz.com/edit/lazy-load-auxilary-b7vpg-e2ax7j）中，您只需要满足以下条件：

这些天来，我已经读了很多关于路由的文章，而经常出现的问题是您不能使用带有空路径的惰性路由，因此请添加lazy.module路由配置：

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

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

 path: 'lazy',

然后如注释所建议的，命名的插座有一种特定的使用方式：（应该是第一个路由器链接指令）

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

您的堆叠闪电战现在可以正常工作