angular2 中监听浏览器关闭提示

需求：关闭当前浏览器窗口有两种方式，一是直接点击当前窗口关闭，二是点击页面中保存或者提交按钮关闭。直接点击窗口关闭时，需要询问确认是否离开当前页面，点击页面中按钮关闭则不需要询问。

 

逻辑：

首先，监听浏览器关闭事件需要放在ngAfterViewInit钩子中，即当页面渲染加载完成之后监听。

其次，需要定义一个全局变量判断当前关闭窗口的方式，用变量判断即可。

 

代码：

isTips = true; // 判断窗口关闭是否要询问--全局变量


// 声明周期钩子中监听关闭事件  
ngAfterViewInit() {
    // 浏览器关闭监听
    window.onbeforeunload = (event)=>{
      if (this.isTips) {
        event.returnValue =  '确认离开吗？'
      }
    };
// 页面关闭后，在本地存储一个变量，可在其父级或者其他页面添加一个定时器取该变量的值进行判断，做操作，如刷新当前列表
    window.onunload = (event)=>{
      StorageUtil.setLocalStorage('isRefresh', true); // 向上一级一页发送刷新消息
    };
  }


  
  // 页面中保存或提交按钮
  submitExame() {
    this.message.success('保存成功!');
    this.isTips = false;
    this.ngAfterViewInit();
    window.close();
  }