Angular 5 无法匹配延迟加载模块的命名出口上的任何路由

Question

我的根模块路由是这样的：

        RouterModule.forRoot([
        { path: '', redirectTo: 'management-portal', pathMatch: 'full' },            
        { path: 'management-portal', loadChildren: './xxx/management-portal.module#ManagementPortalModule', canActivate: [AuthGuard] },          
        { path: 'login', component: LoginComponent },
        { path: '**', component: NotFoundComponent }
    ], {
       enableTracing: true 
    })

按预期工作，我可以在登录后路由到 ManagementPortalModule。让我们看看我的延迟加载的 ManagementPortalModule。

有一个命名的路由器插座。

 <router-outlet name='sub'></router-outlet>

我在 ManagementPortalModule 中的路由。

    RouterModule.forChild([
  {
    path: '', component: ManagementPortalComponent,        
    children: [            
        { path: '', component: Test1Component, outlet: 'sub' },
        { path: 'test2', component: Test2Component, outlet: 'sub' }            
    ]
  }         
])

它可以在开头加载'sub'出口中的Test1Component。我想在单击 link

时路由到 Test2Component

<a  [routerLink]="[{ outlets: { sub: ['test2'] } }]"></a>

生成Url

/management-portal/(sub:test2)

当我 clicked.Then 尝试时没有任何反应

<a [routerLink]="['',{ outlets: { sub: ['test2'] } }]">

Url

/management-portal(sub:test2)

我认为 url 根据 this 的格式是正确的，然后当我点击

时出现错误

Cannot match any routes. URL Segment: 'test2'

请帮忙，非常感谢！

Answer 1

尝试使用命名出口路由的非空顶级路径。

ManagementPortalModule 中的路由。

    RouterModule.forChild([
  {
    path: 'load', component: ManagementPortalComponent,        
    children: [            
        { path: '', component: Test1Component, outlet: 'sub' },
        { path: 'test2', component: Test2Component, outlet: 'sub' }            
    ]
  }         
])

更多详情请参考：

Angular 5 无法匹配延迟加载模块的命名出口上的任何路由

Angular 5 Cannot match any routes on named outlet of lazy loaded module

routerlink

router-outlet

angular

angular-router