ionic2+Angular 依赖注入之Subject ——使用Subject来实现组件之间的通信

在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!

ionic2+Angular 依赖注入之Subject ——使用Subject来实现组件之间的通信

相关推荐