web-dev-qa-db-fra.com

Vérifiez la connexion Internet sur le Web en utilisant Angular 4

J'utilise Angular 4 pour le développement de mes applications. Je dois vérifier si la connexion réseau est disponible pour avoir un problème de connexion utilisant Angular pour. Est-ce possible avec Angular 4.

J'ai vérifié avec https://github.com/HubSpot/offline. Je pense que cela ne fonctionnera pas pour angular 4. N'importe qui s'il vous plaît suggérer. Est-il possible d'utiliser offlinejs pour Angular 4 ou toute autre alternative?

Merci Sarath C M

angularweb
5
user3541485

Vous ne devez utiliser aucune bibliothèque pour cela, vous pouvez utilisernavigatorobjet global comme window. Vous pouvez utiliser dans angular4 

public onlineOffline: boolean = navigator.onLine;
10
Sajeetharan

Pour la tâche requise, il existe un package npm, ng-connection-service. Ci-dessous le code complet:

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(){

  }

}

Vous pouvez aussi trouver le code de travail complet sur: cliquez ici

1
Soni Kumari

J'ai créé une classe appelée NetworkConnection qui vérifie l'état de la connexion réseau. Voici un exemple de code

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();

Et vous pouvez l'utiliser comme

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

En outre, si vous souhaitez vérifier la connexion à Internet, vous pouvez régulièrement envoyer des requêtes ping à des sites tels que www.google.com au lieu de online/offline. OR combinaison des deux approches. 

1
vinesh