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)
    });
}