Question

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

我＆＃39;我正在使用Ionic 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 - Ionic Lifecycle Hooks

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 - 内部HTML

<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;
...
}

Ionic 3 - 防止浏览器关闭

1 个答案: