javascript - 如何 "mount"Angular 2 模块在路由层次结构中某个点的路由

Question

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

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

我知道这可以通过延迟加载实现，但我希望这个模块能够被提前加载。

Answer 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
    }
];