RC5：在不同的路由器插座中延迟加载NgModule(RC5 : Lazy loading of NgModule in different router

RC5：在不同的路由器插座中延迟加载NgModule(RC5 : Lazy loading of NgModule in different router-outlet)

我使用RC5的NgModule来做动态路由加载。

我的应用程序有两个深度级别。 我有像这样的路线：

应用程序/登录 应用程序/仪表板/模块1 应用程序/仪表板/模块2 等等...

每个deph级别都有它自己的router-outlet，因此我可以在每个级别定义自定义布局。 即登录和仪表板显示在应用程序router-outlet中，而module1和module2显示在仪表板router-outlet中。

根据需要动态加载每个路由的配置是什么？

I'm using RC5's NgModule to do dynamic route loading.

My app has two depth level. I have routes like :

app/login app/dashboard/module1 app/dashboard/module2 etc...

Each deph level has it's own router-outlet so I can define custom layout at each level. i.e. login and dashboard are displayed in app router-outlet while module1 and module2 are displayed in dashboard router-outlet.

What is the configuration to load dynamically each route on demand ?

最满意答案

这是一个动态加载accoss 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 { }

其中/login和/dashboard将被布置的<router-outlet> 。

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将进行布局。 你不应该命名路由器插座

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>即仪表板的路由器<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 { }

这就对了。 你应该拥有所有你需要的结构来构建你的'加载'应用程序。 希望能帮助到你。

Here is a minimal working example of dynamic loading accoss NgModules and 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 { }

The <router-outlet> where /login and /dashboard are going to be laid out.

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 point to the module to be loaded on demand.

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> where /dashboard/accounts and /dashboard/transfert are going to be laid-out. You should not name the 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 ensures that children routes are loaded in current <router-outlet> i.e. dashboard's router-outler

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

This is the end of the route. It will be displayed in the dashboard's router-outlet because is is a children route of dashboard.

accounts.component.ts

@Component({ moduleId: module.id, template: '<div>Your accounts!!</div>' }) export class AccountsComponents { }

That is it. You should have all you need to structure your 'load as you go' application. Hope it helps.