使用Angular 4检查Web中的Internet连接

Question

我正在使用Angular 4进行应用程序开发。我需要检查网络连接是否可用，因为它有使用Angular for的任何连接问题。是否可以使用Angular 4。

我查了https://github.com/HubSpot/offline。我认为这对角4不起作用。任何人请建议。这是否可以为Angular 4或任何其他替代品使用offlinejs？

谢谢Sarath C M.

Answer 1

您不必为此使用任何库，您可以使用像窗口一样的navigator全局对象。你可以在angular4中使用in

public onlineOffline: boolean = navigator.onLine;

Answer 2

我创建了一个名为NetworkConnection的类，它检查网络连接的状态。这是代码示例

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

export enum ConnectionStatusEnum {
  Online,
  Offline
}

export class NetworkConnection {

  public static status: ConnectionStatusEnum = ConnectionStatusEnum.Online;
  private static online$: Observable<string>;
  private static offline$: Observable<string>;

  public static init() {
    NetworkConnection.online$ = Observable.fromEvent(window, 'online');
    NetworkConnection.offline$ = Observable.fromEvent(window, 'offline');

    NetworkConnection.online$.subscribe(e => {
      console.log('Online');
      NetworkConnection.status = ConnectionStatusEnum.Online;
    });

    NetworkConnection.offline$.subscribe(e => {
      console.log('Offline');
      NetworkConnection.status = ConnectionStatusEnum.Offline;
    });
  }

  constructor() {
    NetworkConnection.init();
  }

}

new NetworkConnection();

你可以像使用它一样

import { NetworkConnection, ConnectionStatusEnum } from './ConnectionStatus';
....
if(NetworkConnection.status == ConnectionStatusEnum.Offline) {
    // do something
}
....

此外，如果您想检查与互联网的连接，您可以定期ping www.google.com等网站而不是online/offline事件。或两种方法的组合。

Answer 3

对于所需的任务，有一个npm包，ng-connection-service。以下是完整的代码：

import { Component,OnInit } from '@angular/core';
import { ConnectionService } from 'ng-connection-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'internet-connection-check';
  status = 'ONLINE'; //initializing as online by default
  isConnected = true;

  constructor(private connectionService:ConnectionService){
    this.connectionService.monitor().subscribe(isConnected => {
      this.isConnected = isConnected;
      if(this.isConnected){
        this.status = "ONLINE";
      } else {
        this.status = "OFFLINE"
      }
      alert(this.status);
    });
  }
  ngOnInit(){

  }

}

您还可以找到完整的代码：click here

Answer 4

if(navigator.onLine){
  alert("You are Online")
 }
  else {
   alert("You are Offline")
    }

navigator.onLine - >返回true或false