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!