Angular2学习：Subject和Observable 文章标题

原文链接：http://blog.csdn.net/superpeepi_csdn/article/details/72673122



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文件就省略了。