在使用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: Subscription constructor (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服务
当你的业务越来越多的时候，你不可能只用一个service来支撑服务，你需要引入多个service进行与服务端的通讯。service模块化其实很简单，只要注意service进行provider的位置就行了，由于项目不同，具体的例子就不列举了。
章节四：打包发布
每次总是小手发抖，担心打包过程中会出现各种各样的问题。我就列举一下一些简单的常见的打包后可能会出现的问题，如果大家没遇到可以去程序员老黄历查查你今天可能适合打包提测，如果你遇到了那太好了，我就将这些坑分享给道友们。
（1）版本问题
由于整个项目是结合ng-zorro来做的，可能由于cli的版本问题，打包过后如果遇到了部门按钮失效，或者部门样式丢失的问题，那么你可以尝试去更新一下你全局的cli版本和项目中的cli版本，具体更新的方法，我在最前面已经写过了。
（2）服务端刷新路由丢失的问题（hash/histroy模式）
导入 HashLocationStrategy 及 HashLocationStrategy，开启hash模式。