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 函數，它從數據庫中獲取新數據）。

順便說一句，我知道禁用任何瀏覽器功能是一種糟糕的方式，但在這種特殊情況下，我只需要它按我的意願工作。