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

atiyar 发表于 Dev

阿提亚尔

我在中定义了一些路线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并且仍然使用默认布局。我怎样才能做到这一点？

akotech

您可以使用该loadChildren属性并直接在回调函数中返回模块。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。