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必须需要赋值之后这个弹窗才会出现。
有兴趣的朋友可以深入研究研究。

更新：
如果再angular这样写的话，那么不管跳转到哪个页面，只要进行刷新或者离开页面操作就会弹出对话框，体验很不好。
所以这里使用fromEvent，在卸载组件的时候销毁掉这个流就可以。
看代码：

constructor(
    private router: Router,
    private modalService: NzModalService,
    private message: NzMessageService,
  ) {
        if (this.hasSaved) { // 判断是否未保存
          this.unload.push( // 如果未保存则刷新或关闭页面会触发弹窗
            fromEvent(window, 'beforeunload').subscribe((event: any) => {
              (event || window.event).returnValue = '1';
            })
          );
        } else {
          this.unload.forEach(x => x.unsubscribe());
        }
  }

卸载页面时：

  ngOnDestroy(): void {
    this.unload.forEach(x => x.unsubscribe());
  }

这样就ok了！