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了！