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