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