ionic2服務數據租借

Question

我有以下服務類，它在提供程序等中被設置為單例。

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Geolocation } from 'ionic-native';
import { Platform } from 'ionic-angular';

import 'rxjs/Rx';

@Injectable()
export class TestService {
private appData: any;
constructor(private http: Http) {
    console.log("service constructor called");
    this.loadAppData();
}

loadAppData() {
    let url = `/api/b502daab-2c7b-4cea-a00e-dc5aa6b58196`;
    this.http.get(url).map(res => res.json()).subscribe(data => {
        this.appData = data;
        console.log(this.appData);
    });
    console.log(this.appData);
}
getAppData()
{
    return this.appData;
}

}

訂閱中的console.log（this.appData）輸出一個對象，因為該對象應該在輸出未定義的對象之后輸出，是否應該在那時設置？ 使事情變得更糟。

我在構造函數上調用loadappdata，在我的頁面中，我想通過調用來獲取對象

export class HomePage {

constructor(public navCtrl: NavController, public testService: TestService) {
console.log(testService.getAppData());
};


}

但是getAppData始終是未定義的，

我試圖讓服務保留一個對象，以便我的頁面可以根據需要從中獲取數據。 我給人的印象就是那應該如何利用服務來跨頁面共享數據

Answer 1

由於http.get調用的異步ajax請求，您遇到了這些問題。 this.loadAppData函數中的編程順序如下：首先，您執行ajax請求this.http.get

接下來您在訂閱之外的console.log

一旦get請求的響應收到響應，將調用subscription的箭頭功能，然后再次console.log。

解決方案是從服務中返回http.get Observable並在組件中進行預訂。

@Injectable()
export class TestService {
constructor(private http: Http) {}

loadAppData() {
    let url = `/api/b502daab-2c7b-4cea-a00e-dc5aa6b58196`;
    return this.http.get(url).map(res => res.json());
}


export class HomePage {
    constructor(public navCtrl: NavController, public testService: TestService) {
        this.testService.loadAppData().subscribe(data => {
            this.appData = data;
        });
    };
}

要緩存數據，您可以返回一個Promise，該Promise解析為本地緩存的數據，或者如果沒有可用的請求和返回，則返回該Promise。 例如：

@Injectable()
export class TestService {

    public data: any;

    constructor(private http: Http) {}

    loadAppData() {

        return new Promise((resolve) => {
            if (this.data) {
                return resolve(this.data);
            } else {
                let url = `/api/b502daab-2c7b-4cea-a00e-dc5aa6b58196`;
                return this.http.get(url)
                    .map(res => res.json())
                    .subscribe(data => {
                        this.data = data;
                        return resolve(data);
                    });
            }
       });
}

Answer 2

1-您可以使用ngrx store https://github.com/ngrx/store-存儲服務結果，並且每個頁面都將從存儲中檢索信息。

2-使用ReplaySubject-

在您的服務代碼中：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Geolocation } from 'ionic-native';
import { Platform } from 'ionic-angular';

import 'rxjs/Rx';

@Injectable()
export class TestService {
private appData: any;
constructor(private http: Http) {
    this.userSubject = new ReplaySubject<any>(1);
this.loadAppData().subscribe(resp => {console.log(resp)});
}

loadAppData():observable<any> {
    let url = `/api/b502daab-2c7b-4cea-a00e-dc5aa6b58196`;
    this.http.get(url).map(res => res.json()).map(data => {
      this.userSubject.next(data);
      return data;
    });
    console.log(this.appData);
}

get appData(): Observable<any> {
    return this.userSubject.asObservable();
  }

在您的主頁中：

export class HomePage {

constructor(public navCtrl: NavController, public testService: TestService) {
console.log(testService.getAppData());
};

ngOninit() {
this.appData.subscribe(resp => {
 console.log(resp)
});

}

在您的個人資料頁面中：

export class ProfilePage {

    constructor(public navCtrl: NavController, public testService: TestService) {
    console.log(testService.getAppData());
    };

    ngOninit() {
    this.appData.subscribe(resp => {
     console.log(resp)
    });
}