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

时间:2018-09-17 10:48:19

标签: javascript angular angular5 angular6

我有一个可以进入离线模式的应用程序。为此,我实现了一个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>

当我下线时,我会收到所需的消息,但是现在互联网断开了,当我刷新时,我收到了带有该dinasour的常见Google错误消息。

自从错误组件脱机运行以来,我再也无法在其角度组件中呈现错误HTML。我需要在刷新时呈现上述HTML。

当我单击开发人员工具的“脱机”时,我呈现HTML,以下是屏幕截图: enter image description here

当我刷新同一页面(仍处于离线模式)时,我收到以下信息: enter image description here

我应该如何处理?

3 个答案:

答案 0 :(得分:0)

如果您正在注册服务人员,则可以尝试:

ngOnInit() {
    if (!navigator.onLine) {
      this.isOnline = false;
    }
  }

请注意,您应在构建项目并提供服务后对其进行检查。

答案 1 :(得分:0)

关于浏览器的缓存访问:How to Enable Offline Browsing in Firefox 如果您将事件监听器附加到浏览器上的document.body,则Chrome无法正常工作。 您可以为这些事件注册侦听器:

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

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

  4. 通过指定onoffline =“ ...”         HTML标记中标签上的属性。

JavaScript

Sub correction()
    Dim ws1 As Worksheet, ws2 As Worksheet
    Dim lastRow As Long, j As Long
    Set ws1 = ThisWorkbook.ActiveSheet
    Set ws2 = ThisWorkbook.Sheets("ERC DATABASE CORRECTION")
    lastRow = Cells(Rows.Count, "A").End(xlUp).row
    For j = 3 To 8000
        Dim rng As Range
        Dim row As Range
        Dim cell As Range
        Set rng = Range("H3:BF9000")
        For Each row In rng.Rows
            For Each cell In row.Cells
                For i = 1 To Len(cell.Value)
                    If cell.Characters(i, 1).Font.Color = vbRed _
                                        And cell.Value <> "" Then
                        lastRow = lastRow + 1
                        ws1.Rows(j).EntireRow.Copy ws2.Range("A" & lastRow)
                    End If
                Next i
            Next cell
        Next row
    Next j
End Sub

答案 2 :(得分:0)

转到开发人员工具中的“网络”标签,然后通过运行“审核”来查看软件是否已注册并且脱机工作。 enter image description here