1

おそらく簡単なIonic2/Angular2の問題に苦しんでいますが、解決策がわかりません。

DataService というサービスで API 呼び出しからのデータを使用する Recipes というコンポーネントがあります。これはすべて良いです。

次に、レシピから起動されたモーダルに表示される別のコンポーネントがあります。このコンポーネントには、API クエリ (つまり、呼び出される URL) を変更するコントロールがあります。ユーザーがモーダルを閉じたときに、新しい URL で API を呼び出してレシピのデータを更新したいのですが、これを機能させる方法がわかりません。

以下は、レシピとモーダルのクラスを含む私のレシピ.tsと、DataServiceコードを含む私のdata.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:

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 に答える