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

发布时间：2020-12-17 10:25:14 所属栏目：安全来源：网络整理

导读：我有一个名为example.module的延迟加载的Angular模块.在example.module中,我有两个不同的组件,分别是a.component和b.component,以及a和b使用的一组不同的子组件. 我想要的是,当模块从路由器延迟加载时,我可以根据用户从父路由选择的路由直接路由到这两个组件

我有一个名为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/

使用延迟加载的模块时,应将它们视为急切加载的模块,并将.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 },component: CrisisListComponentB },];

因此,一旦合并,您将拥有以下配置：

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

因此,如果要使用/ crisis-b导航到CrisisListComponentB,则必须指定完整URL

/crisis-b/crisis-b

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!