在Angular+ionic2 开发过程中，我们不难发现，页面之间跳转之后返回时是不会刷新数据的。
场景一：当前页面需要登录之后才能获取数据——去登录，登录成功之后返回——页面需要手动刷新才能获取到数据。
场景二：当前正在浏览地址列表——选择添加或者更改现有地址，保存成功之后——返回列表，页面数据不是最新的数据。
……
实现需求：一旦用户登录成功，列表数据发生变化……就通知相关的组件，主动去获取最新的数据。
类似的场景有很多，在Angular开发中我们就需要使用Subject来实现组件之间的通信。
step1:创建主题对象。为了便于维护和管理，我把项目中需要通信的对象统一声明在一个文件中。
import { UserModel } from '../model-res/user-model';
import { Subject } from "rxjs/Rx";
export const AppOnChangeSunject = {
UserOnChange: new Subject<UserModel>(),//订阅用户登录状态的变化
OrderAddressOnChange:new Subject<any>(),//订阅订单地址是否发生改变
AddressListOnChange:new Subject<any>(),//订阅地址列表数据的更新
}
step2:在相关的数据更新接口中调用next()方法，通知相关的订阅者已经接受到新的信息，以地址列表为例。
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { URLService } from '../../common/urls';
import { EditAddressModel } from '../../model-req/edit-address-model';
import { AppOnChangeSunject } from '../../common/change-subject';
@Injectable()
export class JfAddressService {
constructor(private http: Http, private us: URLService) { }
getUserAddress(): Observable<any> {
let url = this.us.getUrl('yxt_getUserAddress')
return this.http.get(url).map(res => res.json().data);
}
deleteUserAddress(obj): Observable<any> {
// 删除地址
let url = this.us.getUrl('yxt_deleteUserAddress', obj);
return this.http.delete(url, obj).map(res => {
AppOnChangeSunject.AddressListOnChange.next(200);
return res.json();
})
}
editUserAddress(obj: EditAddressModel): Observable<any> {
// 编辑更新地址
let url = this.us.getUrl('yxt_editUserAddress', obj);
var data = this.us.objectToUrlParams(obj);
return this.http.put(url, data).map(res => {
AppOnChangeSunject.AddressListOnChange.next(200);
return res.json();
})
}
addUserAddress(obj: EditAddressModel): Observable<any> {
// 添加地址
let url = this.us.getUrl('yxt_addUserAddress', obj);
var data = this.us.objectToUrlParams(obj);
return this.http.post(url, data).map(res => {
AppOnChangeSunject.AddressListOnChange.next(200);
return res.json();
})
}
setUserDefaultAddress(obj):Observable<any>{
// 设为默认地址
let url=this.us.getUrl('yxt_setUserDefaultAddress',obj);
return this.http.post(url,null).map(res=>{
AppOnChangeSunject.AddressListOnChange.next(200);
return res.json();
})
}
}
以上的所有操作都会让地址列表的数据发生变化，所以在操作完相关操作之后需要发出通知。
step3:在地址列表组件中添加订阅。
import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { JfAddressService } from '../jf-address.service';
import { AppOnChangeSunject } from '../../../common/change-subject';
import { MsgBarService } from '../../../common/msg-bar';
import { MainPage } from '../../../common/main';
import { WechatService } from '../../../common/wechat.service';
@IonicPage({
name: 'jfAddress',
segment: 'jfAddress/:p0',
defaultHistory:['usercenter']
})
@Component({
selector: 'page-jf-address',
templateUrl: 'jf-address.html',
})
//p0订单已选地址
export class JfAddressPage extends MainPage implements OnInit {
addresses: any[];
currentAddress;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private service: JfAddressService,
private alertCtrl: AlertController,
private ms: MsgBarService,
public wechat: WechatService) {
super(wechat);
this.currentAddress = navParams.data.p0 || '';
AppOnChangeSunject.AddressListOnChange.subscribe(res => {
if (res == 200) {
this.getUserAddress();//重新获取最新的数据
}
})
}
ngOnInit() {
this.getUserAddress();
}
getUserAddress(e?) {
this.service.getUserAddress().subscribe(res => {
if (res.addressWsDTOList) {
this.addresses = res.addressWsDTOList;
}
if (e) { e.complete(); }
},()=>{
if (e) { e.complete(); }
})
}
}
over!