我正在使用 RC5 的 NgModule 进行动态路由加载。
我的应用有两个深度级别。我有这样的路线:
- 应用/登录
- 应用程序/仪表板/模块1
- 应用程序/仪表板/模块2
- 等...
每个 deph 级别都有自己的路由器导出,因此我可以在每个级别定义自定义布局。即登录和仪表板显示在应用程序路由器导出中,而模块 1 和模块 2 显示在仪表板路由器导出中。
按需动态加载每个路由的配置是什么?
最佳答案
这是一个动态加载访问 NgModules 和 router-outlet 的最小工作示例。
app.module.ts
@NgModule({
declarations: [AppComponent],
imports: [
RouterModule,
routing],
bootstrap: [AppComponent],
providers: [
// some providers
]
})
export class AppModule { }
app.component.ts
@Component({
template: '<router-outlet></router-outlet>'
})
export class BadAppComponent { }
<router-outlet>
其中 /login
和 /dashboard
将被布置。
app.routes.ts
export const routes: Routes = [
{path: '', redirectTo: '/login', terminal: true},
{path: 'login', component: LoginComponent},
{path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule'}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
loadChildren
指向按需加载的模块。
dashboard.module.ts
@NgModule({
declarations: [
DashboardComponent
],
imports: [CommonModule, RouterModule, routing],
exports: [DashboardComponent],
providers: [
// some providers
]
})
export class DashboardModule { }
dashboard.component.ts
@Component({
moduleId: module.id,
template: '<div>sidebar left</div><router-outlet></router-outlet><div>sidebar right</div>',
})
export class DashboardComponent {
constructor() {}
}
<router-outlet>
其中 /dashboard/accounts
和 /dashboard/transfert
将被布置。你不应该命名 router-outlet
dashboard.routes.ts
export const routing: ModuleWithProviders = RouterModule.forChild([
{path: '', component: DashboardComponent,
children: [
{ path: 'accounts', loadChildren: 'app/dashboard/accounts/accounts.module#DashboardAccountsModule'},
{ path: 'virement', loadChildren: 'app/dashboard/transfert/transfert.module#DashboardTransfertModule'}
]
}
]);
children
确保子路由加载到当前 <router-outlet>
即仪表板的路由器输出
accounts.module.ts
@NgModule({
declarations: [
AccountsFragment
],
imports: [CommonModule, RouterModule, routing],
exports: [AccountsFragment]
})
export class DashboardAccountsModule { }
accounts.routing.ts
export const routing: ModuleWithProviders = RouterModule.forChild([
{ path: '', component: AccountsComponent}
]);
这是路线的终点。它将显示在仪表板的路由器导出中,因为它是仪表板的子路由。
accounts.component.ts
@Component({
moduleId: module.id,
template: '<div>Your accounts!!</div>'
})
export class AccountsComponents {
}
就是这样。 您应该拥有构建“随时加载”应用程序所需的一切。 希望对您有所帮助。
关于angular - RC5 : Lazy loading of NgModule in different router-outlet,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39228826/