Angular 如何检查是否有网络连接

如何检查浏览器中是否有网络连接

使用角度代码

我需要设置一个场景，应用程序在连接脱机时发出消息警报。论坛中的代码片段据说在移动设备中工作正常。如何调整代码，使其在浏览器环境中也能正常工作。任何帮助都将不胜感激，。我是离子4号的新手

import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network/ngx'
import { BehaviorSubject, Observable } from 'rxjs';
import { ToastController, Platform } from '@ionic/angular';

export enum ConnectionStatus {
  Online,
  Offline
}

@Injectable({
  providedIn: 'root'
})
export class NetworkService {

  private status: BehaviorSubject<ConnectionStatus> = new BehaviorSubject(ConnectionStatus.Offline);

  constructor(private network: Network, private toastController: ToastController, private plt: Platform) {
    this.plt.ready().then(() => {
      this.initializeNetworkEvents();
      let status =  this.network.type !== 'none' ? ConnectionStatus.Online : ConnectionStatus.Offline;
      this.status.next(status);
    });
  }

  public initializeNetworkEvents() {

    this.network.onDisconnect().subscribe(() => {
      if (this.status.getValue() === ConnectionStatus.Online) {
        console.log('WE ARE OFFLINE');
        this.updateNetworkStatus(ConnectionStatus.Offline);
      }
    });

    this.network.onConnect().subscribe(() => {
      if (this.status.getValue() === ConnectionStatus.Offline) {
        console.log('WE ARE ONLINE');
        this.updateNetworkStatus(ConnectionStatus.Online);
      }
    });
  }

  private async updateNetworkStatus(status: ConnectionStatus) {
    this.status.next(status);

    let connection = status == ConnectionStatus.Offline ? 'Offline' : 'Online';
    let toast = this.toastController.create({
      message: `You are now ${connection}`,
      duration: 3000,
      position: 'bottom'
    });
    toast.then(toast => toast.present());
  }

  public onNetworkChange(): Observable<ConnectionStatus> {
    return this.status.asObservable();
  }

  public getCurrentNetworkStatus(): ConnectionStatus {
    return this.status.getValue();
  }
}

从'@angular/core'导入{Injectable}；
从'@ionic native/Network/ngx'导入{Network}
从“rxjs”导入{BehaviorSubject，Observable}；
从'@ionic/angular'导入{ToastController，Platform}；
导出枚举连接状态{
在线 的
离线
}
@注射的({
providedIn:'根'
})
导出类网络服务{
私有状态：BehaviorSubject=新的BehaviorSubject（ConnectionStatus.Offline）；
构造器（专用网络：网络，专用toastController:toastController，专用plt:平台）{
这个.plt.ready（）。然后（（）=>{
this.initializeNetworkEvents（）；
让status=this.network.type！=“无”？ConnectionStatus.Online:ConnectionStatus.Offline；
this.status.next（状态）；
});
}
公共初始化enetworkevents（）{
this.network.onDisconnect（）.subscribe（（）=>{
if（this.status.getValue（）==ConnectionStatus.Online）{
log（“我们离线”）；
this.updateNetworkStatus（ConnectionStatus.Offline）；
}
});
this.network.onConnect（）.subscribe（（）=>{
if（this.status.getValue（）==ConnectionStatus.Offline）{
log（“我们在线”）；
this.updateNetworkStatus（ConnectionStatus.Online）；
}
});
}
专用异步updateNetworkStatus（状态：ConnectionStatus）{
this.status.next（状态）；
让connection=status==ConnectionStatus.Offline？'Offline'：'Online'；
让toast=this.toastController.create({
消息：`您现在是${connection}`，
时长：3000，
位置：'底部'
});
toast.then（toast=>toast.present（））；
}
public onNetworkChange（）：可观察{
返回此.status.asObservable（）；
}
public getCurrentNetworkStatus（）：ConnectionStatus{
返回此.status.getValue（）；
}
}

在angular或本机javascript中，您可以使用浏览器窗口API事件在线和离线

稍后，您可以使用Behaviorsubject将其包装到任何服务中

您可以在angular中将以下事件与HostListener一起使用，以在线或离线检测。 这适用于所有主流浏览器，包括移动浏览器

  @HostListener("window:online", ["$event"])
  onlineEvent(event) {
    this.processOnline(event);
  }
  processOnline(event){
    if (event.type == "online") {
      // do something here when app is online or become online after gets offline
    }
  }
  @HostListener("window:offline", ["$event"])
  offlineEvent(event) {
    this.processOfflineEvent(event);
  }
  processOfflineEvent(event){
    if (event.type == "offline") {
      // do something here when app is offline
    }
  }

您可以检查实现

---

查看演示，打开页面，断开wifi或计算机上任何已连接网络的连接。

谢谢Abhinav Kumar。但我不知道如何使用它。请举例说明如何调用它。我非常感谢您当浏览器脱机或联机时，会自动调用此功能。您可以实现此代码并更改网络状态。更新了答案