在Angular 2/4中刷新之前执行功能

Question

在HTML页面上,当用户点击/按下F5按钮页面刷新但在刷新之前我想执行一个功能或一个简单的警报.

用户可以点击刷新按钮,按F5或Ctrl + R.

使用Angular2/4

Answer 1

刷新页面应该触发绑定的事件处理程序window:beforeunload.这个stackblitz展示了如何使用"Home"组件实现它HostListener.您可以通过在整页模式下执行页面刷新来测试页面刷新.

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

@Component({
    ...
})
export class HomeViewComponent {

  @HostListener("window:beforeunload", ["$event"]) unloadHandler(event: Event) {
      console.log("Processing beforeunload...");
      // Do more processing...
      event.returnValue = false;
  }

  ...
}

Answer 2

这里需要依赖浏览器事件。

window.onbeforeunload = (ev) => {
            this.myFunction();

            // OR

            this.yuorService.doActon().subscribe(() => {
                alert('did something before refresh');  
            });

             // OR

            alert('goin to refresh');

            // finally return the message to browser api.
            var dialogText = 'Changes that you made may not be saved.';
            ev.returnValue = dialogText;
            return dialogText;
    };