我使用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.
更多推荐
发布评论