web-dev-qa-db-ja.com

Modalにデータを渡す方法ionic 2

こんにちは、私はデバイスビューからモーダル（デバイス詳細ビュー）にデータを渡し、モーダルにバインドしようとしているので、(click)=openModal()クリックしたパラメータでモーダルが開きます。しかし、残念ながら、私はそれをどのように扱うことができるのか誰にもまだ空いていますか？

//データソースとモーダルハンドラー

import { Component } from '@angular/core';

import { ModalController, Platform, NavParams, ViewController,NavController } from 'ionic-angular';

import { ModalPage } from '../modal/modal';

@Component({
  selector: 'page-deviceslist',
  templateUrl: 'devicelist.html'
})
export class DevicesListPage {

  devices;
  device;
  constructor(
    public  modalCtrl: ModalController,
    public nav: NavController,
    public params: NavParams,
  ) {

    this.devices = [
      {
        title: 'Küche',
        items: [
          {title: 'KüchenAid', consumption:'32 W', checked:'true'},
          {title: 'Thermomix', consumption:'0 W', checked:'false'}
        ]
      },
      {
        title: 'Wohnzimmer',
        items: [
          {title: 'Fernseher',consumption:'0 W', checked:'false'},
          {title: 'Stehlampe',consumption:'60 W', checked:'true'},
        ]
      }
    ];
      this.device = this.devices[this.params.get('devNum')];
  }

  openModal(deviceNum) {
    let modal = this.modalCtrl.create(ModalPage, deviceNum);
    modal.present();
    console.log(this.device);
      console.log(this.devices);
  }

};

//およびmodal.ts

import { Component } from '@angular/core';
import { ModalController, Platform, NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html'
})
export class ModalPage {

  constructor(
    public platform: Platform,
    public params: NavParams,
    public viewCtrl: ViewController
  ) {
  }

  dismiss(data) {
    this.viewCtrl.dismiss(data);
  }

}
javascripttypescriptionic-frameworkmodal-dialogionic2
11
Alex

Ionic v3のModal Controllerでデータを渡すプロセスは、Nav Controllerでデータを渡すこととは異なります。主な違いは、キーと値でデータを渡すことです。

これを行う必要があります：

let modal = this.modalCtrl.create(ModalPage, {deviceNum: deviceNum});

モーダルコンストラクターで：

constructor(public platform: Platform, params: NavParams,public viewCtrl: ViewController) {
    console.log(params.get('deviceNum'));
}
52
Alexandre Justino