我怎么能听模态关闭事件?

时间:2017-05-30 22:38:50

标签: ionic2 modal-dialog addeventlistener

我需要知道我的模态何时关闭。与ionViewDidLeave或类似的东西一样,似乎没有一种明确的方式来做到这一点。我尝试了ionViewDidLeave并且感觉它没有用于模态关闭,因为我还没有使用navController移动到该页面,我使用模态显示页面。

home.ts

/*show modal with post form on add event page */

  postEvent(){ 

      let modal = this.modalCtrl.create(AddEvent);
      modal.present();


}

AddEvent.TS

/* Close modal and go back to feed */

     close(){

     this.viewCtrl.dismiss(); 

        //I need to change a value on the home page when this dismiss happens.  

    } 

3 个答案:

答案 0 :(得分:9)

你只需要听你家中的模态关闭事件。

// listen for close event after opening the modal
    postEvent(){
        let modal = this.modalCtrl.create(AddEvent);
        modal.onDidDismiss(() => {
        // Call the method to do whatever in your home.ts
           console.log('Modal closed');
    });
    modal.present();
}

`

答案 1 :(得分:5)

你会做的

// create a new variable to record whether the animation is in progress
var dropdownAnimating = false;

function desplegarMenu () { //DESPLIEGA MENU EN RESPONSIVE
    $('#dropdown').click(function() {
        // if the animation is in progress, don't do anything
        if (dropdownAnimating) return;

        // set the flag that the drop down is animating
        dropdownAnimating = true;

        // use the complete function to reset the flag when the animation is complete
        $('.container-menu ul').slideToggle(500, function() { dropdownAnimating = false; });

        $('#dropdown i').toggleClass("fa fa-bars").toggleClass("fa fa-times");
    });
}

您可以在docs

中找到

答案 2 :(得分:1)

这个问题在发布Ionic 4之前就被问到了,但是我认为这与今天有关。 Ionic 4版本:

home.ts

async postEvent() {
    const modal = await this.modalCtrl.create({
        component: AddEvent
    });
    modal.onDidDismiss().then(data => {
        console.log('dismissed', data);
    });
    return await modal.present();
}

add-event.ts

constructor(public modalCtrl: ModalController) {}

close() {
    this.modalCtrl.dismiss({
        dismissvalue: value
    });
}

不要忘记在HomeModule中包含AddEventModule:

home.component.ts

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        IonicModule,
        CommonModule,
        AddEventModule
    ],
    exports: [
        ...
    ]
})