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

笨拙 - https://embed.plnkr.co/uiLFu0EBZ00F8sLH836w/

Answer 1

一旦模块被解析，我会做一个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');
    }
  }
}

Answer 2

使用延迟加载模块时，您应该将它们视为预加载模块，并且您在 .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 }
    ]
  }
];

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

/crisis-b/crisis-b

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

Angular navigate directly to lazy loaded module child route

routing

lazy-loading

angular