如何在 ionic 2 中将数据从带有表单的模态传递到主页

Question

嗨，任何人都可以帮忙。我是离子和棱角的新手。我正在尝试在 Ionic 2 中创建天气应用程序。我创建了一个主页，其中包含调用AddWeather（）函数的Click事件。该函数打开一个附加了窗体的模态。我正在尝试将数据从模态上的表单传递回主页，并在屏幕上输出。我已经尝试过ngModel，但似乎无法使其正常工作。

这是我的代码：（home.ts）

import { Component } from '@angular/core';
import { NavController, ModalController, NavParams } from 'ionic-angular';
import { AddPage } from '../add/add';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public weatherList = [];
  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
}
addWeather() {
    let addWeatherModal = this.modalCtrl.create(AddPage);

    addWeatherModal.present();
  }
}

---

(add.html)
<ion-header>
  <ion-navbar color="weatherbru">
    <ion-title>Modal</ion-title>
    <ion-buttons end>
        <button ion-button icon-only (click)="CloseModal()"><ion-icon name="close"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <form>
        <ion-item>
            <ion-label stacked>City</ion-label>
            <ion-input type="text" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Country</ion-label>
            <ion-select >
                <ion-option value="us">United States</ion-option>
                <ion-option value="uk">United Kingdom</ion-option>
            </ion-select>
        </ion-item>
        <button ion-button block (click)="CloseModal()">Add Weather</button>
    </form>
<div padding>
</div>
</ion-content>

---

(add.ts)
import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { NavController, NavParams, ViewController } from 'ionic-angular';
@Component({
  selector: 'page-add',
  templateUrl: 'add.html'
})
export class AddPage {
  constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {}

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

Answer 1

在你的 html 中：

<form>
        <ion-item>
            <ion-label stacked>City</ion-label>
            <ion-input [(ngModel)]="form.city" type="text" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Country</ion-label>
            <ion-select [(ngModel)]="form.country">
                <ion-option value="us">United States</ion-option>
                <ion-option value="uk">United Kingdom</ion-option>
            </ion-select>
        </ion-item>
        <button ion-button block (click)="CloseModal()">Add Weather</button>
    </form>

在您的 add.ts 文件中：

export class AddPage {
    form : any; //Declare the form object to be bound to your html
  constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {}
CloseModal() {
  this.viewCtrl.dismiss(this.form); //Send back the form object when closeModal is called
 }
}

在您的家中：

addWeather() {
    let addWeatherModal = this.modalCtrl.create(AddPage);
    addWeatherModal.present();
    addWeatherModal.onDidDismiss(data=>{ //This is a listener which wil get the data passed from modal when the modal's view controller is dismissed
        console.log("Data =>", data) //This will log the form entered by user in add modal.
    })
  }