imports: [ CommonModule, FormsModule, ReactiveFormsModule , NgxEchartsModule, HttpClientModule, NgZorroAntdModule, RouterModule.forChild(EVENTROUTES) ], exports: [ RouterModule ],
routerModule 包含两个关键方法，forRoot()，forChild()
这两个方法，做为控制多个模块在同一模块进行展示，分别在父子module中起到了关键作用，这也是LoadChildren生效的关键步骤。
//路由配置文件 { path: 'index', component: NzDemoLayoutTopSide2Component, children: [ { path: 'event', loadChildren: './event/eventAnalysis.module#EventAnalysisModule' } ] },
//EventAnalysisModule 路由部分 { path: 'eventAnalysis', component: EventAanlysisComponent, children: [ { path: 'overview', component: OverviewComponent }, { path: 'CreditEvaluation', component: CreditEvaluationComponent }, { path: 'loanHistroy', component: LoanHistroyComponent }, { path: 'userInfo', component: UserInfoComponent } ] }
如果你的项目比较大，需要将路由进行模块化或者进行一些懒加载或者按需加载的相关功能，你需要通过loadChildren将路由进行联系。由于loadChildren是需要依赖到最外层路由导入的文件中的，所以你需要将你导入的模块的路径写在路由参数中，而不是通过import的形式导入，并且你需要使用#去分割路径，和导入的模块名。
章节三：引入拦截器，统一管理请求与相应
如果你使用axios，你可能用过他的拦截功能，允许我们把身份认证，错误处理和服务器状态码等相关问题进行统一处理，而不需要在每个页面去单独处理，angular在实现拦截器功能的过程中也非常简单，只需要实现HttpInterceptor接口就可以了。
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const clonedRequest = req.clone({ headers: req.headers.set('Content-Type', 'text/plain;charset=UTF-8') });
而intercept方法则有两个参数，一个是 request，一个是next来调用下一个"中间件"。
按照angular 官网文档的写法，request有一个clone方法，可以去处理我们的请求，并在请求中加入响应的参数，如token, header, 浏览器cookie等
最后，你需要将你的请求参数传递到下一个中间件，而这里则是在return之后进行操作，像这样:
return next.handle(clonedRequest)
在响应处理的过程中，包含多种情况，你需求将正确的请求返回到相应的组件，将异常的请求进行统一处理，而这个过程则是一种observable模式，我们需要用mergeMap， do等rxjs操作符来进行处理。
return next.handle(clonedRequest) .mergeMap((event: any) => { // 处理异常 reurn bservable.create(Observable => Observable.next(event)); }) .catch((res: HttpResponse<any>) => { return Observable.throw(res); })
使用catch进行捕获，返回到组件中。下面是整个拦截器的代码，需要的话可以进行引入，当然，你还需要现在主Module中进行引入，才能够正常生效：
import { HTTP_INTERCEPTORS } from '@angular/common/http'; providers: [MyService, { provide: LocationStrategy, useClass: HashLocationStrategy }, { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true, }, ApiModule]
拦截器的代码：
import { Injectable } from '@angular/core'; import { Observable } from "rxjs/Observable"; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/mergeMap'; // thorw方法需要单独引入 import 'rxjs/add/observable/throw'; import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse} from '@angular/common/http'; @Injectable() export class NoopInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const clonedRequest = req.clone({ headers: req.headers.set('Content-Type', 'text/plain;charset=UTF-8') }); // console.log("new headers", clonedRequest.headers.keys()); return next.handle(clonedRequest) .mergeMap((event: any) => { // if (event instanceof HttpResponse) { // return Observable.create(Observable => Observable.error(event)); // } return Observable.create(Observable => Observable.next(event)); }) .catch((res: HttpResponse<any>) => { return Observable.throw(res); }) } }
关于mergeMap和整个拦截器的用法，sf上的大神们也进行了详细的说明：
引入http服务进行通讯
当你引入angular的拦截器之后，你就可以统一管理所以请求的请求头，并且可以集中处理所有请求的响应体和异常情况了。那么http请求就变的非常简单了。关于请求的写法，官网和网上有很多的例子，你也可以封装请求方法来进行使用。
引入service服务与后台进行交互