如何将子组件设置为路由器插座的默认路由？ [复制]答案

【问题标题】：How to set a child component as a default route for a router-outlet? [duplicate]如何将子组件设置为路由器插座的默认路由？ [复制]
【发布时间】：2018-02-28 21:18:17
【问题描述】：

我正在使用Lazyloading，我有两个router-outlets。当我想导航到另一个子路线时会出现问题。我收到此错误，

TypeError：无法读取未定义的属性“拆分” 在 defaultUrlMatcher (router.js:566) 比赛时（router.js:2221）.....

我的主要应用路由器模块看起来像，

const appRoutes: Routes = [
    { path: '', redirectTo: 'web/welcome' , pathMatch: 'full' },
    { path: 'web', redirectTo: 'web/welcome' , pathMatch: 'full' },
    {
        path: 'web',
        loadChildren: 'app/core/website/modules/website.module#WebSiteModule',
        data: { preload: true }
     },
    {
        path: 'dbapp', canActivate: [AuthGuardService],
        loadChildren: 'app/core/database/modules/db.module#DbModule',
        data: { preload: true }
     },
    { path: '**', redirectTo: '/404',  pathMatch: 'full'},
    { path: '**', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}},
];

对于dbapp，我有这个路由模块，

const dbRoutes: Routes = [
  {
    path: '',
    component: DbHomeComponent,
    data: { preload: true },
    pathMatch: 'full',
    children: [
      { path: '', component: UserDashboardComponent },
      {
        path: 'registry',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['reg'] } },
        loadChildren:
          'app/core/database/database-cores/registry-core/modules/registry.module#RegistryModule'
        // canActivateChild: [RoleGuardService]
      },
      {
        path: 'embryology',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['emb'] } },
        loadChildren:
          'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
      },
      {
        path: 'nursing',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['nur'] } },
        loadChildren:
          'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
      }
    ]
  },
];

我的地图如下所示，

路由器映射，下划线components 是router-outlets

所以根据我的配置。路由从https://www.artngcore.com:4200/web/welcome 开始，身份验证后路由更改为https://www.artngcore.com:4200/dbapp

我设法导航到UserDashboardComponent 作为默认路由，如果我路由到其他孩子，我的问题，即routerLink="/dbapp/registry"

如何将子组件显示为默认路由并导航到其他子路由？

【问题讨论】：

你是用什么东西来自动生成那个路由器图形还是你手动创建的？
@Zze 我正在使用Augury

标签： angular lazy-loading angular-routing

【解决方案1】：

解决了，答案来源于here，

所以我的dbapp路由模块应该是这样的，

const dbRoutes: Routes = [
  {
    path: '',
    component: DbHomeComponent,
    data: { preload: true },
    children: [
      { path: '', component: UserDashboardComponent },
      {
        path: 'registry',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['reg'] } },
        loadChildren:
          'app/core/database/database-cores/registry-core/modules/registry.module#RegistryModule'
        // canActivateChild: [RoleGuardService]
      },
      {
        path: 'embryology',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['emb'] } },
        loadChildren:
          'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
      },
      {
        path: 'nursing',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['nur'] } },
        loadChildren:
          'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
      }
    ]
  }
];

我要做的就是改变路由匹配策略，pathMatch: 'full'不应该被包含

【讨论】：