网站搜索

javascript - 如何在路由层级的某个点“挂载”Angular 2 模块的路由


假设我有一个主要路由模块定义如下:

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

我知道这可以通过延迟加载实现,但我希望这个模块被主动加载。

答案#1

这非常直接,虽然据我所知仍然还没有记录。

尽管路由定义的 loadChildren 属性通常与懒加载相关联,但它也可以被分配一个返回急加载模块的函数:

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