角度6-延迟加载辅助问题

Question

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

错误错误:未捕获(promise中):错误:无法匹配任何路线。URL段:“lazy/aux1”错误:无法匹配任何路由。URL段:ApplyRedirects.noMatchError处的“lazy/aux 1”(https://lazy-load-auxiliary-b7vpg-e2a x7j . stack blitz . io/turbo _ modules/@ angular/router @ 6 . 1 . 7/bundles/router . UMD . js:1455:20)catch subscriber . eval[as selector](https://lazy-load-auxiliary-b7vpg-e2a x7j . stack blitz . io/turbo _ modules/@ angular/router @ 6 .MapSubscriber上的subscriber . error(https://lazy-load-auxiliary-b7vpg-e2ax7j . stack blitz . io/turbo _ modules/rxjs @ 6 . 3 . 2/internal/subscriber . js:74:18)map subscriber上的subscriber . _ error(https://lazy-load-auxiliary-b7vpg-e2ax7j . stack blitz . io/turbo _ modules/rxjs @ 6 . 3 . 2/internal/subscriber . js:96:26)。MapSubscriber上的subscriber . error(https://lazy-load-auxiliary-b7vpg-e2ax7j . stack blitz . io/turbo _ modules/rxjs @ 6 . 3 . 2/internal/subscriber . js:74:18)map subscriber上的subscriber . _ error(https://lazy-load-auxiliary-b7vpg-e2ax7j . stack blitz . io/turbo _ modules/rxjs @ 6 . 3 . 2/internal/subscriber . js:96:26)。TapSubscriber上的subscriber . error(https://lazy-load-auxiliary-b7vpg-e2ax 7j . stack blitz . io/turbo _ modules/rxjs @ 6 . 3 . 2/internal/subscriber . js:74:18)。_ error(https://lazy-load-auxiliary-b7vpg-e 2 ax7j . stack blitz . 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

从您的示例(https://stack blitz . com/edit/lazy-load-auxiliary-b7vpg-e2ax 7j)来看，您只需要几样东西:

这几天我读了很多关于路由的书，经常得到的反馈是不能有空路径的懒惰路由，所以在lazy.module routes config中添加:

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

然后将您的空惰性路径名修改为“lazy”

 path: 'lazy',

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

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

有了这个，你的堆栈闪电战现在可以工作了

Answer 2

您需要进行一些更改，您不需要命名您的网点，并在路由中提及网点名称

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>

然后你可以使用

请参见更新堆栈