订阅后的 Ionic2 angular2 加载视图

Question

我希望在运行 http 帖子后转到应用中的下一个视图。

我有 3 项服务：

1. 服务器服务 - 通用 http 调用 - 获取、发布等

2. 城市服务 - 在调用服务 1 并获取数据的应用程序中存储城市列表数据

3. 钻取服务 - 钻取城市列表，一旦收到来自城市服务的数据，就会显示有关城市的信息

在角度 1 中，我将传入一个函数（回调），它表示可以加载页面或在我们拥有数据后执行某些操作。但是，我对如何在 http 调用后实现这一点有点卡在第 2 版中。

我用于一般发布或获取请求的服务器服务：

post(data){       
 var postData = 'data='+JSON.stringify(data);

 return this.http.post(this.server, postData, {
  headers: this.headers
 })
 .map(res => res.json());          
}

调用上述 post(data) 城市服务的城市服务还存储我在应用程序中重复使用的数据：

viewCity(send){   
this.server.post(send).subscribe((data) => {        
    this.data.cityData = data.city;
    //ONCE HERE I WANT TO THEN LOAD THIS
    //ANGULAR ONE THE CALLBACK RUN HERE
});
}

那么，当我从 drill 服务调用 viewCity 时，如何在通话结束后让 ionic 更改视图？

我尝试过使用回调，但传入的函数为 null 并且不起作用。可能不正确的 TypeScript 语法？

编辑/更新：

所以我设法让它工作，但我不喜欢这个解决方案。任何人都可以对此进行改进：

  viewCity(r){    
  this.cityService.getCity(r)
  .subscribe((data) => {  //call the service and return the http object
      this.cityService.data.city = data.city; //set the data back through to the service
      this.nav.push(RestaurantPage); //load the page and access the service in this component 
  });
  } 

Answer 1

您可以订阅服务，让页面知道服务何时完成，并推送新页面。请看this plunker。

首先，在调用服务的页面中，我们这样订阅服务：

  constructor(private nav: NavController, private service: MyService) {         
        // When the service tells us, we're going to redirect
        // the user to the Page1
        this.service.getData.subscribe((receivedData) => {
            this.nav.push(Page1, { data : receivedData });
        });         
    }

请注意，我们也可以将服务中的信息作为参数发送到下一页。

然后，在服务中，在观察者实例上使用next 方法，这样我们就可以告诉所有订阅者（在这种情况下调用服务的页面）执行下一步。

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class MyService { 

  private getDataObserver: any;
  public getData: any;

  constructor(){
    // Initialize the observer
    this.getDataObserver = null;
    this.getData = Observable.create(observer => {
        this.getDataObserver = observer;
    });
  }

  public getDataFromServer() {
    // Let's pretend this method gets data from the server
    setTimeout(() => {
      this.getDataObserver.next("This is a new message retrieved from the service.");
    }, 3000);
  }
}

---

编辑：

viewCity(r){    
  this.cityService.getCity(r)
  .subscribe((data) => {  //call the service and return the http object
      this.cityService.data.city = data.city; //set the data back through to the service
      this.nav.push(RestaurantPage); //load the page and access the service in this component 
  });
  } 

我假设 viewCity(r){...} 方法在您的一个页面中（因为您可以访问 NavController 实例）。

我唯一要更改的是，您使用相同的服务来获取数据 (this.cityService.getCity(r))，然后也将其保存在那里 (this.cityService.data.city = data.city;)。

那你为什么不在cityService的cityService.getCity(r)方法中设置城市，然后你只需要在服务完成后重定向到RestaurantPage：

viewCity(r){    
  this.cityService.getCity(r).subscribe((data) => {  //call the service and return the http object
      this.nav.push(RestaurantPage); //load the page and access the service in this component 
  });
}