So rufen Sie eine Callback-Funktion von einem Modal

Question

Bei Laden für meine Homepage frage ich meinen Benutzer, um eine Standardstadt festzulegen. Dies ist einer von zwei Orten in der App, wo die Standardstadt geändert werden kann, daher habe ich einen Service dafür erstellt. Im Konstruktor der Homepage rufe ich eine Funktion auf dem Dienst auf, die ein Modal öffnet, wo Benutzer aus der Liste der Städte auswählen können. Ich öffne das Modal nicht direkt über home.ts, sondern über eine Funktion des Dienstes. Wenn dieses Modal nach dem Abfangen der Stadtauswahl geschlossen wird, muss ich die Eigenschaft defaultCity auf der Seite home.ts ändern. Die Dokumentation zeigt, wie ein Callback an die create() -Methode des modalen Controllers übergeben wird, nicht unbedingt, wie ein Aufruf an eine Funktion zurückgegeben wird, die eine andere Funktion aufruft, die das Modal erzeugt. Diese Frage bezieht sich speziell auf Ionic 2 Modale. 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 // SEITE

zur modalen PASSED

<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

Sie müssen die Stadt auf eine Funktion in onDidDismiss() Aber zuerst nehmen diesen Dienst zurückzukehren, gibt es keine Verwendung, um es und Sie müssen nur eine modale rufen hol dir eine Stadt. Es könnte nützlich sein, wenn Sie zu viele Städte haben und einen Service von einem Modal anrufen möchten, um alle Städte zu bekommen.

So in yout home.ts nennen die modal

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(); 
} 

In Ihrem modalen können Sie Parameter entlassen zurück, mit navController vorbei Sie dies nicht tun können, also wenn eines Tages müssen Sie eine Seite aufrufen erhalten etwas tun und eine Daten zurückgeben, nur modal anstelle der normalen navCtrl.push() verwenden.

Ich weiß nicht, ob Sie und

mit

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 
} 

hoffte, das hilft: D