如何使用默认布局，同时将路由定义保留在各自的预加载模块中

Question

我在 AppRoutingModule 中定义了一些路由，它们使用默认布局 -

const routes: Routes = [
    {
        path: '',
        component: DefaultLayoutComponent,
        children: [
            { path: 'home', component: HomeComponent },
            { path: 'about', component: AboutComponent }
        ]
    }
];

现在我想添加一个预先加载的功能模块，AuthModule，具有以下路由 -

{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent }

我希望 RegisterComponent 和 LoginComponent 使用默认布局，为此我需要在 AppRoutingModule 中定义这两条新路线，例如 -

const routes: Routes = [
    {
        path: '',
        component: DefaultLayoutComponent,
        children: [
            { path: 'home', component: HomeComponent },
            { path: 'about', component: AboutComponent },
            { path: 'register', component: RegisterComponent },
            { path: 'login', component: LoginComponent }
        ]
    }
];

但我不想在 AppRoutingModule 中移动这些路线。我希望它们包含在各自的路由模块 AuthRoutingModule 中，并且仍然使用默认布局。我该怎么做？

Answer 1

您可以直接在回调函数中使用loadChildren属性和return模块。

const routes: Routes = [
    {
        path: '',
        component: DefaultLayoutComponent,
        children: [
            { path: 'home', component: HomeComponent },
            { path: 'about', component: AboutComponent },
            { path: '', loadChildren: () => AuthModule }  // <---
        ],   
    }
];

如何使用默认布局，同时将路由定义保留在各自的预加载模块中

How to use a default layout while keeping the route definitions in their respective eager-loaded module

angular

typescript

angular-routing

eager-loading