Angular 在角度2/4中刷新前执行函数

在

HTML

页面上，当用户单击/按

F5

按钮页面刷新时，但在刷新之前，我想执行一个功能或简单警报

用户可以单击刷新按钮，按

F5

或

Ctrl+R.

---

使用

Angular

2/4

您需要依赖此处的浏览器事件

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

---

页面刷新应触发绑定到

窗口：beforeunload

的事件处理程序展示了如何使用

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

  ...
}

---

您可以在

组件中
实现OnInit
ngOnInit（）{/**您想要**/}。请记住，您希望以某种方式注入该窗口。在构造函数（）或ngOnInit（）中写入/调用该窗口的位置@codeSetter@codeSetter默认情况下，窗口是可用的，如您所说，使用本机javascript。但是，比如说，使用通用渲染，使用像
window
这样的内置程序将破坏构建。或者如果您的应用程序在webworker中运行。或者一些测试环境。或在任何其他边缘情况下。这就是为什么建议注入它，如果需要的话，使用一个简单的包装器。我不明白-这与幸福有什么关系？伙计们，我在myComponent ngOnInit（）中写下这篇文章，我只有在硬刷新（ctrl+R）页面或关闭选项卡时，才得到确认对话框，我希望它在页面刷新/重新加载/f5+1上。这正是使用Angular2+的用户需要捕获浏览器选项卡刷新/关闭并在之前执行某些操作的地方。如果您不想获得确认休假确认对话框，只需不执行任何操作（不分配returnValue）。是否有任何方法捕获重新加载和取消按钮事件？。因为当单击“重新加载”按钮时。我需要采取一些行动。如果取消了，我不需要执行任何操作。您如何从Ngondestory内部取消订阅？@ConnorsFan但是，我想要
shift+f5
或
ctrl+f5
。仅在调用事件之前强制清除缓存重新加载。如果不需要确认对话框，请不要使用
event.returnValue
。