angular使用onbeforeunload 刷新或离开页面时提示用户保存数据

angular刷新或离开页面时提示用户保存数据

最近收到产品提的这样一个需求，用户在页面操作完成后若用户不小心刷线了页面或者点了后退，这时阻止用户的操作并提示用户数据还未保存。
话不多说上代码

可以这样写

ngOnInit(): void {
    window.onbeforeunload = (event) => {
      (event || window.event).returnValue = '还未保存是否离开';
      // 这里写关闭时需要处理的时间，刷新也会执行这里的方法
    };
  }

也可以这样写

import { HostListener } from '@angular/core';

@HostListener('window:beforeunload')
  doSomething(event) {
    (event || window.event).returnValue = '还未保存是否离开';
  }

谷歌搜了好多回答都是让用onbeforeunload 这个方法，但是我发现复制上去没用，但从某个群里得知有个大神也做过类似功能，一问才知道要给方法参数的returnValue赋值。但是赋值之后是这样的
刷新时
离开时

可以发现你赋给returnValue的值根本没卵用，但是returnValue必须需要赋值之后这个弹窗才会出现。
有兴趣的朋友可以深入研究研究。