Ionic 3-防止浏览器关闭

Question

当用户试图关闭页面时（单击浏览器窗口上的X按钮或离开页面），我需要发送一条消息，如“确定吗？”并执行一些操作。

我正在使用离子3，这是我的配置

cli包：（/home/ubuntu/workspace/mHS/node_modules）

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

全球套餐：

cordova (Cordova CLI) : 7.0.1 

本地套餐：

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.3.0 browser 4.1.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.7.1

系统：

Node : v6.11.2
npm  : 5.3.0 
OS   : Linux 4.9

杂项：

backend : legacy

我尝试了不同的方法，但没有成功：

1-离子生命周期钩

import { Component, ViewChild } from '@angular/core';
import { NavController, Events, LoadingController, Platform } from 'ionic-angular';

@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html'
})

export class SignupPage {

....

ionViewWillUnload() {
    console.log("I'm about to unload");
  }

}

2-主机侦听器

import { Component, HostListener, ViewChild } from '@angular/core';
import { NavController, Events, LoadingController, Platform } from 'ionic-angular';
...
@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html'})

export class SignupPage {

  @HostListener('window:beforeunload', ['$event'])
   handler(event: Event) {
    console.log('event logged')
  }

...

}

3-超文本标记语言

<ion-header>
    <ion-navbar>
        <ion-title>{{pageTitle}}</ion-title>
    </ion-navbar>
</ion-header>

<ion-content onbeforeunload="myScript()">
....
</ion-content>

我错过了什么？

Answer 1

解决方案是第2个-主机侦听器；我忘记返回布尔值。这种方式非常有效。

export class SignupPage {

  @HostListener('window:beforeunload', ['$event'])
  onbeforeunload(event) {
      return this.signupCompleted;
    }
  }
  signupCompleted = false;
...
}