Angular直接导航到延迟加载的模块子路由

Question

我有一个名为example.module的延迟加载的Angular模块.在example.module中,我有两个不同的组件,分别是a.component和b.component,以及a和b使用的一组不同的子组件.

我想要的是,当模块从路由器延迟加载时,我可以根据用户从父路由选择的路由直接路由到这两个组件中的任何一个.

我能想到的唯一工作是制作两个完全独立的模块,每个模块都是独立延迟加载的,公共代码位于由两者导入的第三个共享模块中.这似乎是我需要在整个应用程序中生成更多模板化的代码和文件,而不是以某种方式我可以通过某种方式向一个延迟加载的组件发送信号以便以编程方式加载其中一个路由.

        RouterModule.forChild(
        [
          {
            path: "",
            redirectTo: "component-a" // How do I go to A or B?
          },
          {
            path: "component-a",
            component: ComponentA
          },
          {
            path: "component-b",
            component: ComponentB
          },
        ]

感谢您对该主题的帮助和知识!

编辑 - 根据请求的根路由.

const appRoutes: Routes = [
  {
    path: "example",
    loadChildren: "./example.module#ExampleModule",
  },
];

@NgModule({
  imports: [
      RouterModule.forRoot(appRoutes)
  ],
  exports: [
      RouterModule
  ]
})
export class AppRoutingModule { }

Plunk - https://embed.plnkr.co/uiLFu0EBZ00F8sLH836w/

Answer 1

使用延迟加载的模块时，您应该将它们视为急切加载的模块，并且您在 中指定的路由配置.forChild(routes)将合并到单个应用程序范围的配置中。

因此，在您的特定情况下，您在中定义forRoot：

export const routes: Routes = [
  { path: 'crisis-a', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
  { path: 'crisis-b', loadChildren: 'app/crisis/crisis.module#CrisisModule' }
];

并在.forChild()

const routes: Routes = [
  { path: 'crisis-a',    component: CrisisListComponentA },
  { path: 'crisis-b',    component: CrisisListComponentB },
];

因此，合并后您将拥有以下配置：

export const routes: Routes = [
  { 
    path: 'crisis-a', 
    children: [
        { path: 'crisis-a',    component: CrisisListComponentA },
        { path: 'crisis-b',    component: CrisisListComponentB }
    ]
  { 
    path: 'crisis-b', 
    children: [
        { path: 'crisis-a',    component: CrisisListComponentA },
        { path: 'crisis-b',    component: CrisisListComponentB }
    ]
  }
];

因此，如果您想导航到，CrisisListComponentB则/crisis-b必须指定完整的 URL

/crisis-b/crisis-b