//主module
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
NgZorroAntdModule.forRoot(),
BrowserAnimationsModule
]

//子module
imports: [
CommonModule,
HttpClientModule,
NgZorroAntdModule
],

引入拦截器，统一管理请求与相应

如果你使用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)

在响应处理的过程中，包含多种情况，你需求将正确的请求返回到相应的组件，将异常的请求进行统一处理，而这个过程则是一

我们需要用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服务与后台进行交互

在使用angular4的时候，我想将service做为存储公共数据的地方，那么不同组件的公共的数据和参数，可以存储在service中,

那如果共用的数据总有某些场景下不是最新的，既然是这样，为什么不按照官方的demo那样，将数据源放在service中，之后通过订阅或者

promise的形式去拿到数据呢，这样不同组件在使用一些共用数据的情况下，可以保证是最新数据，使用起来也更方便了。

既然提到了订阅，就不得不说观察者模式了。观察者模式又被称为发布订阅模式。它定义了一种一对一对多的关系网络。简单来说

就是让多个观察者去观察一个对象，当被观察对象发生任何改变的时候，所有订阅了他的观察者们都会及时的收到消息，并及时得到更新。这种

感觉很像订阅报纸一样，订阅报纸后，每当有新报纸出版都会送到你手里，让你知道最新的消息，但是如果你取消订阅报纸，那么你就不会收到最

新版的报纸了。那么这两个角色被观察者和观察者们用什么来表示呢？其实就是subject与observer。关于subject与observer在使用上，sf上

面有很好很全面的介绍：点击打开链接

具体怎么的使用也非常简单，直接上代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ApiModule } from '../api/api';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/retry';@Injectable()// 登录的方法public LoginSubject = new Subject<any>();public getUserInfo(name, pwd):void {var data = {"username":name,"password":pwd};var val = this.HOST.host;this.$http.post(`${val}/login`, data).retry(3).subscribe( res => {this.LoginSubject.next(res)});}

subject是通过new的形式去创建的，那么当你服务端的数据返回之后，你可以使用next将相应流传递到你所定义的subject当中。

服务层的写法就是这样，那么在组件中如何订阅呢？上代码：

            this.service.getUserInfo(name, password)this.subscript = this.service.LoginSubject.subscribe( data => { here is your code }

service需要在构造函数中去声明，这里就不写了。service中的getUserInfo方法接受两个参数，name与password，在这里进行

发布操作，接下来就可以订阅了。由于有些时候，我们会希望在第二次订阅的时候，不会从头开始接收 Observable 发出的值，而是从第一次订

阅当前正在处理的值开始发送，那么就需要对整个过程进行相应的处理。一般来说，我们不会主动去取消订阅，但是根据业务情况不同

我们可能需要去取消订阅，怎么做呢？直接上代码：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { ApiModule } from '../api/api';
import { MyService } from '../myService/service.component';
import {NzMessageService} from 'ng-zorro-antd';
import { Subscription } from 'rxjs/Subscription';@Component({selector: 'login-component',templateUrl: './login.component.html',styleUrls: ['./login.component.less']
})export class LoginComponent implements OnInit {subscript: Subscriptionconstructor (private router:Router,private service: MyService,private _message: NzMessageService,) {this.subscript = new Subscription()}}ngOnInit ():void {this.service.getUserInfo(name, password)this.subscript = this.service.LoginSubject.subscribe( data => {// here is your code}this.subscript.unsubscribe()}}

这就是从创建被观察者oberserver => 发布 => 订阅 => 取消订阅的整个流程。

拆分service服务

import {HashLocationStrategy , LocationStrategy} from '@angular/common';@NgModule({declarations: [AppCmp],bootstrap: [AppCmp],imports: [BrowserModule, routes],providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
});

再次打包就不会出现刷新后404的问题了。