无法在 Angular 11 中检测到在线连接

Question

我尝试在 Angular 11 中显示在线状态。 我做了同样的事情https://dzone.com/articles/how-to-detect-the-internet-connection-status-in-an

我的 ts.file

import { ConnectionService } from 'ng-connection-service';

  isConnected = true;  
  noInternetConnection: boolean; 

 constructor(private connectionService: ConnectionService,) {

    this.connectionService.monitor().subscribe(isConnected => {  
      this.isConnected = isConnected;  
      if (this.isConnected) {  
        this.noInternetConnection=false; 
      }  
      else {  
        this.noInternetConnection=true;
      }  
      
    })  
  }

my.html 文件

  <nb-action *ngIf="noInternetConnection">
      <p>online</p>
    </nb-action>
    <nb-action *ngIf="!noInternetConnection">
      <p>offline</p>
    </nb-action>

但它显示离线。我的 wifi 连接已开启

谁能帮我找出错误？

Answer 1

我个人不建议使用其他库来监听本机浏览器事件，因为这会使应用程序更加健壮，并且可能该库与以下代码相同:(

当我实现这样的功能时，我为本地“在线”和“离线”事件创建了事件侦听器。

这里是网络监控服务。

import { Injectable } from '@angular/core';
import { fromEvent, ReplaySubject } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

@Injectable()
export class NetworkStatusService {

  private init: boolean = navigator.onLine;
  private online: ReplaySubject<boolean> = new ReplaySubject();

  get initStatus() {
    return this.init
  }
  constructor() {
    if (this.init==false) {
      this.online.next(false);
    }
    fromEvent(window, "online").subscribe((val) => {
      this.online.next(true);
    })

    fromEvent(window, "offline").subscribe((val) => {
      this.online.next(false);
    })
  }

  getOnlineStatus() {
    return this.online.pipe(distinctUntilChanged());
  }
}