从页面内部关闭模态页面

Question

我有一个页面，我通过以下方式调用：

let profileModal = Modal.create(PopupPage);
this.nav.present(profileModal);

如何从我的 PopupPage 组件关闭此模态页面：

import { ElementRef } from '@angular/core';
import { Page } from 'ionic-angular';

@Page({
    template: `
<ion-pane padding="" scroll="false">
    <h2>Login with...</h2>
    <p>Please select one of our social logins. We'll never post anything your name
    <button class="button button-default button-full button-danger" style="background-color: #3b5998;"><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</button>
    <button class="button button-default button-full button-danger" style="background-color: #db3236;"><i class="fa fa-google" aria-hidden="true"></i> Google</button>
</ion-pane>`,
    host: {
        "(document: click)": "globalClicked( $event )"
    }
})
export class PopupPage {

    constructor(private elmRef: ElementRef) {}

  globalClicked( event ) {
    if( !this.eventTriggeredInsideHost(event)) alert('NOW');
  }

  eventTriggeredInsideHost( event ) {
    var current = event.target;
    var host = this.elmRef.nativeElement.getElementsByTagName('ion-pane')[0];

    do {
      if ( current === host ) {
        return (true);
      }
      current = current.parentNode;
    } while ( current );

    return (false);
  }
}

Answer 1

为了关闭弹出窗口，您应该在 constructor 中添加 ViewController class 的实例，然后使用 dismiss() 方法。

import { ..., ViewController } from 'ionic-angular';

@Component(...)
class PopupPage {

 constructor(/* ..., */ viewCtrl: ViewController) { }

 dismiss() {
   // You can send information back to the previous page if you need to
   let data = { 'foo': 'bar' };
   this.viewCtrl.dismiss(data);
 }

}

Answer 2

在您的按钮中使用 navPop 来关闭模式，如下所示：

<ion-buttons start navPop>
    <button>
        <ion-icon `enter code here`></ion-icon>
    </button>
</ion-buttons>

从页面内部关闭模态页面

Close Modal Page from the inside of the Page

typescript

ionic-framework

ionic2

ionic3

angular