如何将数据传递给 Modal ionic 2

Posted 2023-03-13

【中文标题】如何将数据传递给 Modal ionic 2

【英文标题】：How to pass data to Modal ionic 2

【发布时间】：2017-07-30 09:13:16

【问题描述】：

大家好，我正在尝试将数据从我的设备视图传递到我的模态（设备详细信息视图）并将其绑定到我的模态，所以如果我这样做(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);
  

【参考方案1】：

在 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'));

【讨论】：

@Alex：您是否在模态控制器中导入了 NavParams？你可以在这里找到一个例子：ionicframework.com/docs/v2/api/navigation/NavParams，真的，在这里：ionicframework.com/docs/v2/api/components/modal/ModalController

@Alexandre 你知道为什么它仍然未定义吗？ :( 在上面的链接中我发布了我的 dpaste

不是真的...你能显示你在哪里调用openModal(deviceNum) 以及你作为deviceNum 传递的内容吗？