Angular学习：Subject和Observable



Subject是微信公众号，Observable是微信用户。

1个Subject可以对应n个不同的Observable，Observable只要向Subject要求接收，每次Subject的更新都能即时收到。

就如1个微信公众号可以有n个没用必然关系的微信用户，只要微信用户关注了微信公众号，每次微信公众号的更新都能及时收到。

以下的例子通过使用Subject和Observable，来取得http请求的response，并显示。

user-login.service.ts

import { Injectable } from '@angular/core';import { Observable } from 'rxjs/Observable';import { Subject } from 'rxjs/Subject';import 'rxjs/Rx';import { Http, Headers, Request, Response, RequestOptions, RequestMethod } from '@angular/http';import { RequestArgs } from '@angular/http/src/interfaces';import { UserModel } from '../user-model';@Injectable()export class UserLoginService {      //微信公众号(Subject)    public subject: Subject<UserModel> = new Subject<UserModel>();        constructor(public http:Http) {        console.log("Angular2---------UserLoginService.constructor");    }    //给微信用户(Observable)关注提供的方法    public get currentUser():Observable<UserModel>{        return this.subject.asObservable();    }        public login(user: UserModel) {        console.log("Angular2---------UserLoginService.login");                let body = JSON.stringify(user);                return this.http.post("http://172.28.197.13:8899/login", body)        .map((response: Response) => {            let userResponseJson = new UserModel();            userResponseJson = response.json();            //微信公众号(Subject)更新            this.subject.next(Object.assign({}, userResponseJson));            localStorage.setItem("currentUser",JSON.stringify(userResponseJson));                        if (userResponseJson && !userResponseJson.errCode) {                console.log("Angular2---------UserLoginService.login SUCCESSED");            } else {                console.log("Angular2---------UserLoginService.login FAILED");            }                        return response;                    })        .subscribe(                data => {                    console.log("Angular2---------UserLoginService.login subscribe data : " + JSON.stringify(data.json()));                },                error => {                    console.log("Angular2---------UserLoginService.login err");                    console.error(error);                }        );            }}

user-login.component.ts

import { Component, OnInit } from '@angular/core';import { UserLoginService } from './user-login.service';import { UserModel } from '../user-model';@Component({  selector: '',  templateUrl: './user-login.component.html',  styleUrls: ['./user-login.component.css']})export class UserLoginComponent implements OnInit {    public errorMessage: string = "";        public userModel: UserModel = new UserModel();    public currentUser: UserModel;    constructor(        public userLoginService: UserLoginService    ) {        console.log("Angular2---------UserLoginComponent.constructor");    }    ngOnInit() {        console.log("Angular2---------UserLoginComponent.ngOnInit");                //执行微信用户(Observable)关注操作(就是那个[给微信用户(Observable)关注提供的方法])。        //每次微信公众号(Subject)有更新，以下subscribe中的处理都会重复执行。        this.userLoginService.currentUser        .subscribe(                data => {                    this.currentUser = data;                    console.log("Angular2---------UserLoginComponent.ngOnInit data : " + JSON.stringify(data));                    if(this.currentUser) {                        this.errorMessage = this.currentUser.errMsg;                    }                }         )    }        public doLogin():void {        console.log("Angular2---------UserLoginComponent.doLogin");         this.userLoginService.login(this.userModel);            }}

html文件就省略了。