Question

我遇到了我认为是Angular 6/7路由中的错误的问题，我正在寻找一种解决方法（如果它是错误的话），或者修复它（如果不是）。

导航到包含命名路由器出口的路由后，导航到同级路由失败，该路由是同级路由之一的子级。

给出下面的路由配置，并以/ 1 / documents的URL开头：

如果从ModuleComponent触发了到“其他”的链接，则URL更改为/1/other，并且组件已成功加载。一切正常
如果将组件加载到命名的插座中（即URL更改为/1/(documents//outlet:test)），然后使用（1）中的相同链接，则不会进行导航，并且会在控制台中记录错误。 li>

期望（2）会成功完成导航并显示OtherComponent。

另一注：即使删除了路由的命名路由器出口部分（即[{ outlets: { outlet: null } }]），问题仍然存在

路由配置：

export const appRoutes: Routes = [{
  path: '', component: AppOutletComponent,
  children: [
    { path: ':id/other', component: OtherComponent },
    {
      path: ':id', component: ModuleComponent, pathMatch: 'prefix',
      children: [
        { path: '', redirectTo: 'documents', pathMatch: 'full' },
        { path: 'documents', component: DocumentsComponent },
        {
          path: 'test',
          outlet: 'outlet',
          component: OutletChildComponent
        }
      ]
    }
  ]
}];

这是导致的错误：

ERROR
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '1'
Error: Cannot match any routes. URL Segment: '1'
at ApplyRedirects.noMatchError (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/@angular/router@7.0.1/bundles/router.umd.js:2520:20)
at CatchSubscriber.eval [as selector] (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/@angular/router@7.0.1/bundles/router.umd.js:2501:33)
at CatchSubscriber.error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/operators/catchError.js:48:31)
at MapSubscriber.Subscriber._error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93:26)
at MapSubscriber.Subscriber.error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73:18)
at MapSubscriber.Subscriber._error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93:26)
at MapSubscriber.Subscriber.error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73:18)
at MapSubscriber.Subscriber._error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93:26)
at MapSubscriber.Subscriber.error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73:18)
at TapSubscriber._error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/operators/tap.js:75:26)

我在Stackblitz上创建了两个小应用程序来演示该问题：

具有直接的应用程序和子组件：
- https://outlet-routing-bug-shared-minimal.stackblitz.io
- https://stackblitz.com/edit/outlet-routing-bug-shared-minimal
在延迟加载的模块中，行为略有不同（这是我实际上试图在我的应用程序中实现的目标，但是试图减少它）：
- https://outlet-routing-bug-shared.stackblitz.io
- https://stackblitz.com/edit/outlet-routing-bug-shared

环境：

Angular 7.2.1（也出现在最新的6个版本中）

希望我不是简单地误会或滥用路由系统...

已记录Angular项目的错误：https://github.com/angular/angular/issues/28189

在命名路由器出口中导航后导航到同级错误

0 个答案: