时间戳

首页 > 解决方案 > 在 Angular 6 中显示离线模式的错误 html

javascript - 在 Angular 6 中显示离线模式的错误 html

问题描述

我有一个可以进入离线模式的应用程序。为此，我实现了一个监听应用程序事件的 HostListener。

@HostListener('window:offline', ['$event']) onOffline() {
   this.isOnline = false;
}

这工作正常，我显示一条错误消息：

<div *ngIf="!isOnline"> 
  <div class="network-div">
    <mat-icon class="network-icon">cloud_off</mat-icon>
  </div>
  <p class="network-text">Network error - unable to connect. 
    Please try again or contact support if error persists, contact the NCR 
    support desk.</p>
</div>

当我离线时，我会收到所需的消息，但是现在互联网已关闭，当我刷新时，我会收到带有该恐龙的通常的谷歌错误消息。

由于它在离线模式下运行，我无法再在我的角度组件中呈现错误 HTML。我需要在刷新时呈现上面的 HTML。

当我点击开发者工具的“离线”时，我会渲染一个 HTML，下面是截图： 在此处输入图像描述

当我刷新同一页面（仍处于离线模式）时，我收到以下信息： 在此处输入图像描述

我该如何处理？

标签： javascriptangularangular5angular6

解决方案

关于浏览器的缓存访问：如何在 Firefox 中启用离线浏览 如果在浏览器上将事件监听器附加到 document.body，Chrome 将无法工作。您可以为这些事件注册侦听器：

  1. 在窗口、文档或 document.body 上使用 addEventListener

  2. 通过将 document 或 document.body 上的 .onoffline 属性设置为 JavaScript Function 对象。

  3. 通过在 HTML 标记中的标记上指定 onoffline="..." 属性。

一个JavaScript

window.addEventListener('load', function() {
  var status = document.getElementById("status");
  var log = document.getElementById("log");

  function updateOnlineStatus(event) {
    var condition = navigator.onLine ? "online" : "offline";

    status.className = condition;
    status.innerHTML = condition.toUpperCase();

    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
  }

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

推荐阅读