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 { }

普兰克 - 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，则必须指定完整网址

/crisis-b/crisis-b

Answer 2

我会让一个canActivate后卫在模块解决后适当地路由它们。

将路线更新为：

RouterModule.forChild(
[
  {
    path: "",
    canActivate: [RootRouteGuard]
  },
  {
    path: "component-a",
    component: ComponentA
  },
  {
    path: "component-b",
    component: ComponentB
  },
]

然后警卫会看起来像这样：

@Injectable()
export class RootRouteGuard implements CanActivate {

  constructor(private router: Router) {}

  public canActivate(route: ActivatedRouteSnapshot) {
    if (/* Logic */) {
      this.router.navigateByUrl('component-a');
    } else {
      this.router.navigateByUrl('component-b');
    }
  }
}

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

2 个答案: