如何从模态调用回调函数

Question

在加载我的主页时，我要求我的用户设置默认城市。 这是应用程序中可以更改默认城市的两个地方之一，因此我为它创建了一个服务。

在主页的构造函数中，我调用服务上的一个函数，该函数打开一个模式，用户可以在其中从城市列表中进行选择。 我不直接通过home.ts打开模态，而是通过服务上的功能。 当该模式在捕获城市选择后关闭时，我需要一种方法来更改home.ts页面上的defaultCity属性。

此处的文档显示了如何将回调传递给模态控制器上的create()方法，不一定是如何将回调传递回调用创建模态的另一个函数的函数。 这个问题专门针对 Ionic 2 模态。 https://ionicframework.com/docs/api/components/modal/ModalController/

主页.ts

    import { Component } from '@angular/core';
    import { LoadingController, ModalController, NavController, PopoverController } from 'ionic-angular';
    import { changeDefaultCity } from '../../services/changeDefaultCity.service';
    
    @Component({
        selector: 'page-home',
        templateUrl: 'home.html',
        providers: [changeDefaultCity] 
    })
    
    export class Home {
    
        defaultCity: string; 
        
            constructor (   public navCtrl: NavController,
                                    public modalCtrl: ModalController,
                                    public loading: LoadingController,
                                    public chngDfCity: changeDefaultCity) {
    
        
    /*if default city isn't selected yet then show city select options on modal*/
    
            if(!this.selectedCity){
    
                    let setDefaultCityFunction = function(dfCity){  
                                                           //CALLBACK I WANT TO USE
    
                                   this.defaultCity = dfCity; 
    
                              };
    
                  this.chngDfCity.presentModal(); //CALL A FUNCTION ON SERVICE WHICH OPENS MODAL
    
            }
    
    
        } // end of constructor
                
    }//END CLASS

我的服务.ts

import { Injectable } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { SetDefaultCity } from '../pages/set-default-city/set-default-city';


@Injectable()
export class changeDefaultCity {


defaultCity: string; 

    constructor(public modalCtrl: ModalController) {

}//end of constructor


/*Open modal and show the list of city options*/ 

    presentModal() {
    let modal = this.modalCtrl.create(SetDefaultCity);
    modal.present();
  }

  /*on city select, set the selection to defaultCity property*/  

    getDefaultCity(dfCity){

                this.defaultCity = dfCity; 
            
        }

  }//end of class 

setDefaultCity.html //PAGE PASSED TO MODAL

<ion-header>
   //header stuff
</ion-header>


<ion-content padding>


<ion-list [(ngModel)]="defaultCity" (ionChange)="setDefaultCity(defaultCity)" radio-group>
  <ion-list-header>
    
  </ion-list-header>

  <ion-item>
    <ion-label>New York</ion-label>
    <ion-radio value="New York"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Los Angeles</ion-label>
    <ion-radio value="Los Angeles"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>San Francisco</ion-label>
    <ion-radio value="San Francisco"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Philadelphia</ion-label>
    <ion-radio value="philadelphia"></ion-radio>
  </ion-item>
 
</ion-list>

</ion-content>

设置默认城市.ts

/* TS FOR THE PAGE PASSED TO THE MODAL. I USE THIS TS TO PASS THE CITY SELECTION TO THE SERVICE WHICH SHOULD PASS IT BACK TO HOME.TS*/

import { Component } from '@angular/core';
import { NavController, ViewController } from 'ionic-angular';
import { changeDefaultCity } from '../../services/changeDefaultCity.service';


@Component({
  selector: 'page-set-default-city',
  templateUrl: 'set-default-city.html',
  providers: [changeDefaultCity] 
})
export class SetDefaultCity {

defaultCity: string; 

  constructor(public navCtrl: NavController, public chngDfCity: changeDefaultCity, public viewCtrl: ViewController) {  

 }//END OF CONSTRUCTOR

  ionViewDidLoad() {
    console.log('Hello SetDefaultCityPage Page');

}

   //CALL THIS FUNCTION ON CHANGE WHICH THEN PASSES THE SELECTION TO THE SERVICE.  

  setDefaultCity(defaultCity){

      this.defaultCity = defaultCity; 

      this.chngDfCity.getDefaultCity(this.defaultCity); //SERVICE

    
          this.viewCtrl.dismiss();       

  
  }//end setDefaultCity

}//end class

Answer 1

您需要将城市返回到onDidDismiss()的函数，但首先取出该服务，它没有用，您只需要调用一个模态来获取城市。 如果您拥有太多城市并希望从模式调用服务以获取所有城市，这可能会很有用。

所以在你的 home.ts 中调用模态

presentModal() {
  let modal = this.modalCtrl.create(SetDefaultCity);
  modal.onDidDismiss(data =>{
    if(data != null) { // check if null in case user quits the page and dont select a city
      return data;
    } // use and else if you need to treat if the user haven't choose a city
  })
  modal.present();
}

在您的模态中，您可以关闭传递参数，使用navController您不能这样做，所以如果有一天您需要调用页面来执行某些操作并返回数据，只需使用 modal 而不是普通的navCtrl.push() 。

我不知道你是否在使用和

setDefaultCity(){
  this.viewCtrl.dismiss(this.defaultCity);       
}

ionViewWillUnload(){ // or ionViewWillLeave
  this.viewCtrl.dismiss(null); // this way you can treat if a user haven't selected a city and has left the page
}

希望这会有所帮助：D