【问题标题】:Angular 5 Cannot match any routes on named outlet of lazy loaded module [duplicate]Angular 5无法匹配延迟加载模块的命名出口上的任何路由[重复]
【发布时间】:2018-05-09 17:29:55
【问题描述】:

我的根模块路径是这样的:

        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' }            
    ]
  }         
])

它可以在开头的“子”插座中加载Test1Component。单击链接时,我想路由到 Test2Component

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

生成的网址

/管理门户/(sub:test2)

点击后什么也没发生。然后我尝试了

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

网址

/management-portal(sub:test2)

我认为根据this的url格式正确,然后点击时出错

无法匹配任何路线。 URL 段:'test2'

请帮忙,非常感谢!

【问题讨论】:

标签: angular angular-router routerlink router-outlet


【解决方案1】:

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

ManagementPortalModule 中的路由。

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

更多详情请参考:Angular 4 Lazy loading with named router-outlet not working

【讨论】:

  • 你绝对的英雄!
猜你喜欢
  • 2019-04-10
  • 2017-12-07
  • 1970-01-01
  • 2023-04-08
  • 1970-01-01
  • 2019-12-07
  • 1970-01-01
  • 2019-01-14
  • 1970-01-01
相关资源
最近更新 更多