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