Question

我正在使用Angular 8.3.6，并且嵌套了要路由的命名出口。我的路线设置如下所示：

{
path: 'main',
component: MainComponent,
data: {
  reuseRoute: true
},
children : [
  {
    path: 'lowerone',
    component: LoweroneComponent,
    outlet: 'mainoutlet', data: {
      reuseRoute: true
    },
    children : [
      {
      path: 'loweroneone',
        component: LoweroneoneComponent,
        outlet: 'loweroneoutlet', data: {
          reuseRoute: true
        }
      }
    ]
  }
]
}

一切都很好，直到我尝试路由到“ loweroneone”。我通过在此处调用这一行代码来实现此目的，主要是因为我对此并不了解。

    this.router.navigate(['/main', { outlets: { mainoutlet: 'lowerone', 
        loweroneoutlet: 'loweroneone' }}]);

此行代码在控制台中创建以下错误：

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main'
Error: Cannot match any routes. URL Segment: 'main'
at ApplyRedirects.noMatchError (router.js:4294)
at CatchSubscriber.selector (router.js:4258)
at CatchSubscriber.error (catchError.js:29)
at MapSubscriber._error (Subscriber.js:75)

在控制台中，我看到了我期望的结果

url: "/main/(mainoutlet:lowerone//loweroneoutlet:loweroneone)"

但是没有骰子。另外，我应该提到'lowerone'组件中的html包含loweroneoutlet，并带有：

<p>lowerone works!</p>
<router-outlet name="loweroneoutlet"></router-outlet>

您可以在Github here上查看代码示例。任何帮助是极大的赞赏。

角度8：路由双嵌套命名路由器出口

0 个答案: