1

我正在努力解决一个 Ionic2/Angular2 问题，这可能是直截了当的，但我就是看不到解决方案。

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

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

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

食谱.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?
  }
}

数据.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());
  }

}

请让我知道我在这里错过了什么......

4

1 回答 1

0

其实在调用dismiss方法的时候，就可以提供数据了。我会这样写你的代码：

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

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

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

请参阅此文档：

于 2016-03-12T06:50:02.597 回答