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

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()中的某个功能但是首先拿出那项服务，对它没用，你只需要打电话就可以获得一个城市。如果你想要太多的城市，并希望从一个模态调用服务来获得所有城市，这可能会很有用。

所以在你家里。调用模态

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你不能这样做，所以如果有一天你需要调用一个页面做某事并返回一个数据，那么只需使用模态代替正常的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

如何从模态调用回调函数

1 个答案: