Angular5 仅刷新数据，而不刷新整个应用程序

Question

我在 Angular5 和 NodeJS 中有一个应用程序，现在，当我在任何页面上单击 F5 时，它需要很长时间才能刷新，有时它不显示数据。我认为它会重新加载我的整个应用程序。有什么方法可以执行"仅数据刷新"或类似操作，因此每次按 F5 时都不会刷新整个应用程序？

Answer 1

从 UX 的角度来看，拦截预期的浏览器行为是一个坏主意。如果您的应用程序崩溃或最终处于我无法返回到先前状态的状态，会发生什么情况？我应该如何"更新"(阅读：提取新代码(您的应用程序？如果我想放弃当前状态怎么办？就个人而言，我对改变任何浏览器行为的网站感到非常生气。

不过，您可能对 https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event 感兴趣。

Answer 2

实际上您可以将"keydown"事件侦听器添加到窗口中：

if (event.keyCode === 116) {
//retrieve data from server
event.preventDefault();
}

这将停止"F5"上的页面刷新并执行自定义功能。 但是对于用户来说，"F5"没有按预期工作可能会很奇怪。

Answer 3

感谢大家的支持！ 我已经使用HostListener完成了它：

@HostListener('document:keydown.F5', ['$event'])
keyEvent(event: KeyboardEvent){
event.preventDefault();
this.getData();
}

现在，当有人单击页面上的 F5 时，它只是重新加载数据(getData 函数，它从数据库中获取新数据(。

顺便说一句，我知道禁用任何浏览器功能都是一种不好的方式，但在这种特殊情况下，我只需要它就可以随心所欲地工作。