使用Ionic2 / Angular2刷新中的另一个组件的新API URL刷新组件可观察

I am struggling with an Ionic2/Angular2 problem that is probably straight forward but I just cannot see the solution.

我正在努力解决可能是直截了当的Ionic2 / Angular2问题，但我无法看到解决方案。

I have a component called Recipes that consumes data from an API call in a service called DataService. This is all good.

我有一个名为Recipes的组件，它在名为DataService的服务中使用来自API调用的数据。这一切都很好。

Then I have another component that is displayed in a modal launched from Recipes. This component has controls that modify the API query (ie, the URL called). When the user closes the modal I want to refresh the data in Recipes by calling the API with the new URL but cannot figure out how to make this work.

然后我有另一个组件显示在从食谱启动的模式中。此组件具有修改API查询的控件（即，调用的URL）。当用户关闭模态时，我想通过使用新URL调用API来刷新食谱中的数据，但无法弄清楚如何使其工作。

Below is my recipes.ts which contains the classes for Recipes and the modal and my data.ts which contains the DataService code.

下面是我的recipes.ts，其中包含Recipes的类以及包含DataService代码的modal和my data.ts。

Recipes.ts:

Recipes.ts：

import {Page, Modal, ViewController, NavController, NavParams} from 'ionic-angular';
import {Inject, Injectable} from 'angular2/core';
import {DataService} from '../../service/data.ts';
import {Http, Headers, Request, RequestOptions, RequestMethod} from 'angular2/http';
import 'rxjs/add/operator/map';

@Page({
  templateUrl: 'build/pages/recipes/recipes.html'
})
export class RecipesPage {
  constructor(nav: NavController, dataService: DataService) {
    this.nav = nav;
    this.dataService = dataService;
    this.results = [];
    this.connectData();
  }

  // open filters modal
  openFilters(filters) {
      let modal = Modal.create(filterModal, this.filters);
      this.nav.present(modal);
  }

  connectData() {
    this.dataService.getData('initialQuery')
    .subscribe(data => {
      this.results = data;
      console.log(this.results);
    })
  }

}

// modal logic
@Page({
  templateUrl: 'build/pages/recipes/recipes-modal.html'
})
export class RecipesModal {
  constructor(nav: NavController, params: NavParams, viewCtrl: ViewController, dataService: DataService) {
    this.nav = nav;
    this.dataService = dataService;
    this.params = params;
    this.viewCtrl = viewCtrl;
  }

  close() {
    this.dataService.getData('nextQuery');
    this.viewCtrl.dismiss();
    // how do I update the data displayed by Recipes when this modal is closed?
  }
}

data.ts:

data.ts：

import {Inject, Injectable} from 'angular2/core';
import {Http, Headers, Request, RequestOptions, RequestMethod} from 'angular2/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DataService {
  constructor(http: Http) {
    this.http = http;
  }

  // function to
  getData(keyword) {
    let options = new RequestOptions({
      method: RequestMethod.Get,
      url: 'https://api/' + keyword,
    });
    let request = new Request(options);
    return this.http.request(request)
    .map(res => res.json());
  }

}

Please let me know what I have missed here...

请让我知道我错过了什么......

1 个解决方案

#1

In fact when calling the dismiss method, you can provide data. I would your code this way:

实际上，在调用dismiss方法时，您可以提供数据。我会用你的代码：

  close() {
    this.dataService.getData('nextQuery').subscribe(data => {
      this.viewCtrl.dismiss(data);
    });
  }

And you can receive the data this way in this other component:

您可以在这个其他组件中以这种方式接收数据：

  openFilters(filters) {
      let modal = Modal.create(filterModal, this.filters);
      modal.onDismiss(data => {
        this.result = data;
      });
      this.nav.present(modal);
  }

See this documentation:

请参阅此文档：

• http://ionicframework.com/docs/v2/api/components/modal/Modal/
• http://ionicframework.com/docs/v2/api/components/modal/Modal/