角直接导航到延迟加载模块的孩子航线

Question

我有一个角模块加载懒叫example.module。在example.module中，我有两个不同的组件，分别称为a.component和b.component，以及a和b使用的一组不同的子组件。

我想什么是，当模块是延迟加载从路由器我可以路由直接要么基于用户从父路由选择哪条路线上这两个部件中的一个。

周围我能想到是使两个完全独立的模块，其中每一个是懒与由两个进口的第三共享模块中的公共代码是独立地加载的唯一的工作。这似乎是多了很多模板代码，我需要在我的整个应用程序产生的文件，而再有是一些方法，我可以用信号通知lazyloaded组件来加载路由的一个程序。

 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你必须指定完整的URL

/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'); 
    } 
    } 
}