RC5:在不同的路由器出口中延迟加载NgModule [英] RC5 : Lazy loading of NgModule in different router-outlet

问题描述

我正在使用RC5的NgModule进行动态路由加载.

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

我的应用有两个深度级别.我有类似的路线:

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

• 应用程序/登录
• app/dashboard/module1
• app/dashboard/module2
• 等...

每个deph级别都有其自己的路由器出口，因此我可以在每个级别定义自定义布局.即登录和仪表板显示在应用程序路由器的插座中，而模块1和模块2显示在仪表板的路由器插座中.

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 ?

推荐答案

这是动态加载访问NgModules和路由器出口的最小工作示例.

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 { }

将布置/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指向要按需加载的模块.

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>，其中/dashboard/accounts和/dashboard/transfert将被布局.您不应该为路由器插座命名

<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确保子级路由已加载到当前的<router-outlet>中，即仪表板的路由器出口商

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.

这篇关于RC5:在不同的路由器出口中延迟加载NgModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！