Question

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

我有3项服务：

服务器服务 - 通用http调用 - 获取，发布等
城市服务 - 在应用中存储城市列表数据，调用服务1并获取数据
钻取服务 - 钻取到城市列表中显示有关城市的信息一旦从城市服务接收数据

在角度1中，我会传入一个函数（回调），它表示可以加载页面，或者现在我们有数据。但是我在版本2中有点陷入如何在http调用之后实现这一点。

我用于通用帖子或获取请求的服务器服务：

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

因此，当我从viewCity服务中拨打drill时，如何在通话结束后获取离线更改视图？

我尝试过使用回调但传入的函数为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.getCity(r)方法中设置cityService方法中的城市，然后只需要在服务完成时重定向到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 }); }

订阅后Ionic2 angular2加载视图

1 个答案: