如何從模態調用回調函數

Question

爲我的主頁加載時請求我的用戶設置默認城市。 這是應用程序中默認城市可以更改的兩個地方之一，因此我爲它創建了一項服務。 在主頁的構造函數中，我打開一個服務的函數，打開一個模式，用戶可以從城市列表中進行選擇。我不直接通過home.ts打開模式，而是通過服務上的功能。當該模式在捕捉城市選擇後關閉時，我需要一種方法來更改home.ts頁面上的defaultCity屬性。 此處的文檔顯示瞭如何將回調傳遞給模態控制器上的create（）方法，而不一定如何將回調傳遞給調用另一個創建模態的函數的函數。 這個問題特別涉及離子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 // PAGE傳遞給模態

<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() 但首先需要的是服務，沒有使用到它，你只需要調用一個模式來得到一座城市。如果你擁有太多的城市並想從模式中獲得所有城市的服務，這可能會很有用。

所以在YOUT 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不能做到這一點，因此，如果有一天你需要得到調用頁面做一些事情並返回一個數據，只需使用模態而不是正常的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