angular - 在 Angular 2/4 中刷新之前执行函数

Question

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

用户可以点击刷新按钮，按 F5 或 Ctrl + R。

使用 Angular 2/4

Answer 1

页面的刷新应该触发绑定(bind)到window:beforeunload 的事件处理程序。 <强> This stackblitz 展示了如何使用 HostListener 为“Home”组件实现它。您可以通过执行它来测试页面刷新 in full page mode .

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;
  }

  ...
}