如何在 Angular 2 的多个文件中拆分 app-routing.module.ts？

Question

考虑到图像，我有一个组件（1）+模块（2）+路由（3）（在“app-routing.module.ts”中）。为了避免“app-routing.module.ts”中的代码过多，我想将路由代码 (3) 移到其他文件中（假设为“product.routes.ts”）。考虑到我使用的是 Angular 2，我该怎么做？谢谢！

Answer 1

这将是我使用的 AppComponentRoutingModule，它可以用更多的文件扩展，通常是每个嵌套路由一个路由文件（将导入到相应的模块中）。组件和路由可能会有所不同，但它通常是这样工作的（为简洁起见跳过了守卫）：

创建 src/app/routes/app.routes.ts 内容相似：

import { Routes } from '@angular/router';
import { ErrorPage } from 'src/app/pages/error/error.page';

export const appRoutes: Routes = [
  { path:          '', redirectTo: 'home', pathMatch: 'full' }, // main entry point.
  { path:      'home', loadChildren: () => import('src/app/pages/home/home.module').then(m => m.HomeModule) },
  { path: 'error/:id', component: ErrorPage, pathMatch: 'full' },
  { path:        '**', redirectTo: '/error/404' }
];

嵌套路由看起来差别不大，例如 src/app/routes/home.routes.ts:

export const homeRoutes: Routes = [{
  path: '',
  component: HomePage,
  children: [
    ...
  ]
}];

创建 src/app/app.component.routing.module.ts 内容相似：

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule } from '@angular/router';
import { appRoutes } from './routes/app.routes';

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes,{preloadingStrategy: PreloadAllModules})
  ],
  exports: [ RouterModule ]
})
export class AppComponentRoutingModule {}

然后在app.module.ts中导入AppComponentRoutingModule:

import { RouterModule } from '@angular/router';
import { AppComponent } from 'src/app/app.component';
import { AppComponentRoutingModule } from 'src/app/app.component.routing.module';
...

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    RouterModule,
    AppComponentRoutingModule,
    ...
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

为了启用详细日志记录，enableTracing: true 是你的朋友。

如何在 Angular 2 的多个文件中拆分 app-routing.module.ts？

How to split app-routing.module.ts in multiple files in Angular 2?

angular2-routing