2016-07-23 57 views
0

我有一个页面,我通过拨打:关闭模态页

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); 
    } 
} 
+1

这是什么问题? –

+0

如何关闭它? – rakete

回答

3

为了关闭弹出窗口,则应在constructor中添加ViewController类的实例,然后使用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); 
} 

} 
+0

谢谢!适用于我。如果弹出窗口在此时打开,您是否知道如何检查? – rakete

+0

你什么时候在_at这个时候?无论如何,你可以尝试'console.log(this.viewCtrl)'看看里面有什么,也许有什么可以帮助你检查... – sebaferreras

+0

通过“(document:click)”:“globalClicked($ event)”I捕获所有点击事件。如果点击在模态框外,模态框应该消失。当然这是点击按钮打开模式框时事件已经被触发。所以盒子应该打开并直接消失。 – rakete

-2

使用navPop在您的按钮来关闭这样的模式:

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