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

Question

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

Answer 1

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

不过，您可能对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 函数，它从数据库中获取新数据）。

顺便说一句，我知道禁用任何浏览器功能是一种糟糕的方式，但在这种特殊情况下，我只需要它按我的意愿工作。