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

【问题标题】：Angular5 Refresh only data, not whole applicationAngular5只刷新数据，而不是整个应用程序
【发布时间】：2020-05-06 09:50:07
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

其实你可以在窗口中添加“keydown”事件监听器：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：