4

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

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

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

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

按需动态加载每条路由的配置是什么？

4

1 回答 1

10

这是一个通过 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将要布置。

应用程序.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指向要按需加载的模块。

仪表板.module.ts

@NgModule({
    declarations: [
        DashboardComponent
    ],
    imports: [CommonModule, RouterModule, routing],
    exports: [DashboardComponent],
    providers: [
        // some providers
    ]
})
export class DashboardModule { }

仪表板.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将要布置。您不应该命名路由器插座

仪表板.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>即仪表板的路由器外部程序中

account.module.ts

@NgModule({
    declarations: [
        AccountsFragment
    ],
    imports: [CommonModule, RouterModule, routing],
    exports: [AccountsFragment]
})
export class DashboardAccountsModule { }

account.routing.ts

export const routing: ModuleWithProviders = RouterModule.forChild([
    { path: '', component: AccountsComponent}
]);

这是路线的尽头。它将显示在仪表板的路由器插座中，因为它是仪表板的子路由。

account.component.ts

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

这就对了。您应该拥有构建“按需加载”应用程序所需的一切。希望能帮助到你。

于 2016-08-30T13:27:03.047 回答