Angular 具有出口、懒散负载和多个子层的路由问题

我正在尝试拥有多层延迟加载的路由 全部导航到指定的出口。 只有两层（主层和子层）的作品 但是从一个孩子导航到一个孩子失败了。 出现错误：无法匹配任何路由。URL段：“第一个孩子的名字”

因此，在第一个子级别中定向到组件是可行的。 但是从这个孩子变成这个孩子的孩子会让我犯错误

应用程序路由：

const routes: Routes = [
  {path: 'desktop-layout', component: DesktopLayoutComponent, children: [
    { path: 'mainmenu-page', component: MainMenuPageComponent, outlet: 'multiUseMenu' },
    { path: 'logviewer-app', loadChildren: './Logging/logviewer-app/logviewer-app.module#LogviewerAppModule', outlet: 'multiUseMenu' },
    { path: 'batch-log-app', loadChildren: './batch-selector/batch-selector.module#BatchSelectorModule', outlet: 'multiUseMenu' }, 
      { path: 'job-editor-app', loadChildren: './job-editor-app/job-editor-app.module#JobEditorAppModule', outlet: 'multiUseMenu' },
      { path: 'capture-service-log', loadChildren: './Logging/capture-service-log/capture-service-log.module#CaptureServiceLogModule', outlet: 'multiUseMenu' },
    { path: 'input-profile-editor-app', loadChildren: './inputsettings-profile-app/inputsettings-profile-app.module#InputsettingsProfileAppModule', outlet: 'multiUseMenu' },  
  ]},
{ path: 'login-page', component: LoginPageComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true,useHash:true }), LoginManagerModule],
  exports: [RouterModule]
})
export class AppRoutingModule { }

const batchselector_routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'batchselector'
  },  
  {
    path: 'batchselector', component: BatchselectorComponent, children: [
      { path: 'idrlogviewer', loadChildren: '../Logging/logviewer-app/logviewer-app.module#LogviewerAppModule', outlet: 'multiUseMenu' },
    ]
  },
];
@NgModule({
  imports: [RouterModule.forChild(batchselector_routes)],
  exports: [RouterModule]
})
export class BatchSelectorAppRouting { }

const logviewer_routes: Routes = [
  {
    path: '',
    component: LogviewerAppDblogviewerComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(logviewer_routes)],
  exports: [RouterModule]
})
export class LogviewerAppRouting { }

 this.router.navigate(['desktop-layout', { outlets: { multiUseMenu: 'batch-log-app/idrlogviewer' } }]);

BatchSelector路径：

const routes: Routes = [
  {path: 'desktop-layout', component: DesktopLayoutComponent, children: [
    { path: 'mainmenu-page', component: MainMenuPageComponent, outlet: 'multiUseMenu' },
    { path: 'logviewer-app', loadChildren: './Logging/logviewer-app/logviewer-app.module#LogviewerAppModule', outlet: 'multiUseMenu' },
    { path: 'batch-log-app', loadChildren: './batch-selector/batch-selector.module#BatchSelectorModule', outlet: 'multiUseMenu' }, 
      { path: 'job-editor-app', loadChildren: './job-editor-app/job-editor-app.module#JobEditorAppModule', outlet: 'multiUseMenu' },
      { path: 'capture-service-log', loadChildren: './Logging/capture-service-log/capture-service-log.module#CaptureServiceLogModule', outlet: 'multiUseMenu' },
    { path: 'input-profile-editor-app', loadChildren: './inputsettings-profile-app/inputsettings-profile-app.module#InputsettingsProfileAppModule', outlet: 'multiUseMenu' },  
  ]},
{ path: 'login-page', component: LoginPageComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true,useHash:true }), LoginManagerModule],
  exports: [RouterModule]
})
export class AppRoutingModule { }

const batchselector_routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'batchselector'
  },  
  {
    path: 'batchselector', component: BatchselectorComponent, children: [
      { path: 'idrlogviewer', loadChildren: '../Logging/logviewer-app/logviewer-app.module#LogviewerAppModule', outlet: 'multiUseMenu' },
    ]
  },
];
@NgModule({
  imports: [RouterModule.forChild(batchselector_routes)],
  exports: [RouterModule]
})
export class BatchSelectorAppRouting { }

const logviewer_routes: Routes = [
  {
    path: '',
    component: LogviewerAppDblogviewerComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(logviewer_routes)],
  exports: [RouterModule]
})
export class LogviewerAppRouting { }

 this.router.navigate(['desktop-layout', { outlets: { multiUseMenu: 'batch-log-app/idrlogviewer' } }]);

日志查看程序批准：

const routes: Routes = [
  {path: 'desktop-layout', component: DesktopLayoutComponent, children: [
    { path: 'mainmenu-page', component: MainMenuPageComponent, outlet: 'multiUseMenu' },
    { path: 'logviewer-app', loadChildren: './Logging/logviewer-app/logviewer-app.module#LogviewerAppModule', outlet: 'multiUseMenu' },
    { path: 'batch-log-app', loadChildren: './batch-selector/batch-selector.module#BatchSelectorModule', outlet: 'multiUseMenu' }, 
      { path: 'job-editor-app', loadChildren: './job-editor-app/job-editor-app.module#JobEditorAppModule', outlet: 'multiUseMenu' },
      { path: 'capture-service-log', loadChildren: './Logging/capture-service-log/capture-service-log.module#CaptureServiceLogModule', outlet: 'multiUseMenu' },
    { path: 'input-profile-editor-app', loadChildren: './inputsettings-profile-app/inputsettings-profile-app.module#InputsettingsProfileAppModule', outlet: 'multiUseMenu' },  
  ]},
{ path: 'login-page', component: LoginPageComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true,useHash:true }), LoginManagerModule],
  exports: [RouterModule]
})
export class AppRoutingModule { }

const batchselector_routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'batchselector'
  },  
  {
    path: 'batchselector', component: BatchselectorComponent, children: [
      { path: 'idrlogviewer', loadChildren: '../Logging/logviewer-app/logviewer-app.module#LogviewerAppModule', outlet: 'multiUseMenu' },
    ]
  },
];
@NgModule({
  imports: [RouterModule.forChild(batchselector_routes)],
  exports: [RouterModule]
})
export class BatchSelectorAppRouting { }

const logviewer_routes: Routes = [
  {
    path: '',
    component: LogviewerAppDblogviewerComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(logviewer_routes)],
  exports: [RouterModule]
})
export class LogviewerAppRouting { }

 this.router.navigate(['desktop-layout', { outlets: { multiUseMenu: 'batch-log-app/idrlogviewer' } }]);

导航：

const routes: Routes = [
  {path: 'desktop-layout', component: DesktopLayoutComponent, children: [
    { path: 'mainmenu-page', component: MainMenuPageComponent, outlet: 'multiUseMenu' },
    { path: 'logviewer-app', loadChildren: './Logging/logviewer-app/logviewer-app.module#LogviewerAppModule', outlet: 'multiUseMenu' },
    { path: 'batch-log-app', loadChildren: './batch-selector/batch-selector.module#BatchSelectorModule', outlet: 'multiUseMenu' }, 
      { path: 'job-editor-app', loadChildren: './job-editor-app/job-editor-app.module#JobEditorAppModule', outlet: 'multiUseMenu' },
      { path: 'capture-service-log', loadChildren: './Logging/capture-service-log/capture-service-log.module#CaptureServiceLogModule', outlet: 'multiUseMenu' },
    { path: 'input-profile-editor-app', loadChildren: './inputsettings-profile-app/inputsettings-profile-app.module#InputsettingsProfileAppModule', outlet: 'multiUseMenu' },  
  ]},
{ path: 'login-page', component: LoginPageComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true,useHash:true }), LoginManagerModule],
  exports: [RouterModule]
})
export class AppRoutingModule { }

const batchselector_routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'batchselector'
  },  
  {
    path: 'batchselector', component: BatchselectorComponent, children: [
      { path: 'idrlogviewer', loadChildren: '../Logging/logviewer-app/logviewer-app.module#LogviewerAppModule', outlet: 'multiUseMenu' },
    ]
  },
];
@NgModule({
  imports: [RouterModule.forChild(batchselector_routes)],
  exports: [RouterModule]
})
export class BatchSelectorAppRouting { }

const logviewer_routes: Routes = [
  {
    path: '',
    component: LogviewerAppDblogviewerComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(logviewer_routes)],
  exports: [RouterModule]
})
export class LogviewerAppRouting { }

 this.router.navigate(['desktop-layout', { outlets: { multiUseMenu: 'batch-log-app/idrlogviewer' } }]);

我想我尝试了

导航（['desktop-layout'，{outlets:{multiusemmenu:'idrlogviewer'}}}]）

等中的所有组合。。 但它们都不起作用

希望有人有更多的经验，可以帮助我。

---

提前感谢。

有一个称为ActivatedRoute的角度功能，它让您可以访问家长和孩子的路线。这样使用：

// In the component you are having trouble :

constructor(private readonly activatedRoute: ActivatedRoute) {}

// Then, debug or log(activatedRoute)

---

我没有具体的解决方案，但请尝试查看其中的内容，并为插座提供一个指向孩子的孩子的url，该url相对于公共家长？

有一个称为ActivatedRoute的角度功能，它允许您访问家长和孩子的路线。这样使用：

// In the component you are having trouble :

constructor(private readonly activatedRoute: ActivatedRoute) {}

// Then, debug or log(activatedRoute)

---

我没有一个具体的解决方案，但是试着看看里面有什么，给插座一个指向孩子的url，相对于普通的父母？

它有这么多的路由，也许如果你删除一些只是为了测试，只留下一个父母-孩子，那么更容易看到任何错误。我可以在没有“出口”属性的情况下完成我的路由。可能有很多路由，如果你只是为了测试而删除一些路由，只留下一个父子路由，那么更容易看到任何错误。我可以在没有“出口”属性的情况下完成我的路由。我尝试过这个，但我不确定如何阅读这个。当在孩子导航之前记录激活路由时，我会得到日志。激活的路由：“/desktop layout/（multiUseMenu:batch log app/batchselector）”没有子级（子级：数组（0））。但是查看routeconfig，我看到一个带有loadChildren的孩子：“../Logging/logviewer app/logviewer app.module#LogviewerAppModule”。所以它在配置中，但还没有加载？我尝试了这个，但我不知道如何读取它。当在孩子导航之前记录激活路由时，我会得到日志。激活的路由：“/desktop layout/（multiUseMenu:batch log app/batchselector）”没有子级（子级：数组（0））。但是查看routeconfig，我看到一个带有loadChildren的孩子：“../Logging/logviewer app/logviewer app.module#LogviewerAppModule”。那么它在配置中，但还没有加载？