如何在路由层次结构中的某个点“挂载”Angular 2 模块的路由答案

【问题标题】：How to "mount" an Angular 2 module's routes at a certain point in the routing hierarchy如何在路由层次结构中的某个点“挂载”Angular 2 模块的路由
【发布时间】：2016-12-13 05:37:49
【问题描述】：

假设我有这样定义的主路由模块：

// app-routing.module.ts
const appRoutes: Routes = [
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'auth',
        component: MasterPageComponent,
        canActivate: CanActivateGuard
    }
];

然后在另一个文件中一个feature路由模块：

// feature-routing.module.ts
const featureRoutes: Routes = [
    {
        path: '/feature',
        component: FeatureComponent
    }
];

如何从我的功能模块中“挂载”路由到我的主模块下，所以我可以这样访问它：

/auth/feature

从概念上讲，我正在寻找类似的东西：

RouterModule.forChildAtMountPoint(featureRoutes, '/auth');

我知道延迟加载可以做到这一点，但我希望这个模块能够快速加载。

【问题讨论】：

标签： javascript angular typescript angular2-routing

【解决方案1】：

这很简单，虽然据我所知仍然还没有documented。

虽然路由定义的loadChildren 属性通常与lazy loading 相关联，但也可以为其分配一个返回急切加载模块的函数：

// app-routing.module.ts
const appRoutes: Routes = [
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'auth',
        component: MasterPageComponent,
        canActivate: [CanActivateGuard],
        children: [
            {
                path: 'feature',
                loadChildren: () => FeatureModule
            }
        ]
    }
];

// feature-routing.module.ts
const featureRoutes: Routes = [
    {
        path: ''
        component: FeatureComponent
    }
];

【讨论】：