angular - 如何将子组件设置为路由器导出的默认路由?

标签 angular lazy-loading angular-routing

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

TypeError: Cannot read property 'split' of undefined at defaultUrlMatcher (router.js:566) at match (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'
      }
    ]
  },
]; 

我的 map 如下所示,

enter image description here 路由器映射,带下划线 componentsrouter-outlets

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

我成功导航到 UserDashboardComponent作为默认路由,如果我路由到其他 child ,即routerLink="/dbapp/registry",我的问题

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

最佳答案

已解决,答案来源于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'不应包含在内

关于angular - 如何将子组件设置为路由器导出的默认路由?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49038719/

相关文章:

module - PrestaShop 中的延迟加载页面?

nhibernate - 使用property-ref映射到非关键字段时,延迟加载不适用于多对一关系

javascript - 打开动态高度时延迟加载会切断图像高度

html - Angular 跨度

angular - 延迟加载时找不到模块错误

angular - 禁用重新加载页面 Angular 6 路由

angular - 带有 Angular 6 的 ionic 4 路由

javascript - Angular 5 使用 FormArray 填充数据

javascript - 如何读取 Controller 中的表单值?

Angular @Input() 可能有也可能没有值