如何从模态调用回调函数

Question

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

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

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

Home.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

myService.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 //页面传递到模态

<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>

setDefaultCity.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 您不能这样做，因此如果有一天您需要调用页面来执行某些操作并返回数据，只需使用模态而不是普通的@ 987654324@.

不知道你用的是不是和

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