Comment vérifier si l'utilisateur dispose d'une connexion internet ou non en Angular2 ?

Question

Comment vérifier la connexion internet dans Angular2 au moment de la frappe de l'API, chaque fois que dans mon application l'API est frappé au serveur parfois l'utilisateur est l'utilisateur est parfois hors ligne (c'est-à-dire sans connexion internet), alors comment puis-je vérifier la connectivité internet ? existe-t-il un code d'état spécial pour la connectivité internet ? ou autre chose ?

PS:- j'ai trouvé navigator.onLine dans angularJs mais semble ne pas fonctionner dans angular2.

• Source - Comment vérifier la connexion internet dans AngularJs

mise à jour

comme sudheer l'a suggéré dans la réponse ci-dessous navigator.onLine en travaillant avec angular2 mais ne fonctionne toujours pas correctement pourquoi ? <a href="http://plnkr.co/edit/3Mw5c9DAU6d0Gnl9CtKP?p=preview" rel="noreferrer">working example here</a>

Answer 1

(2018) Code mis à jour pour rxjs6

Il fonctionne totalement avec angular2. C'est évidemment différent d'angularJS car ni $scope ni $apply n'existent plus. RxJS rend cela facile, cependant ! Testé sur Chrome 53 :

modèle :

<p>{{online$ | async}}</p>

composant :

import { Observable, fromEvent, merge, of } from 'rxjs';
import { mapTo } from 'rxjs/operators';

@Component({ /* ... */ })
export class MyComponent {
  online$: Observable<boolean>;

  constructor() {
    this.online$ = merge(
      of(navigator.onLine),
      fromEvent(window, 'online').pipe(mapTo(true)),
      fromEvent(window, 'offline').pipe(mapTo(false))
    );
  }
}

Réfléchissez à ce que signifie "hors ligne" pour votre cas d'utilisation !

Un câble ethernet débranché et une connexion EDGE à 3KB/s ont probablement les mêmes implications pour votre application, bien que cette dernière signifie que vous êtes pas techniquement hors ligne !

Du point de vue d'un programmeur, être connecté sans fil avec un signal très faible est en fait bien pire que d'être réellement déconnecté, car c'est bien plus difficile à détecter !

Le code ci-dessus renvoyant un false signifie que vous êtes absolument hors ligne, c'est-à-dire déconnecté. Il retourne true n'indique pas nécessairement qu'il y a une connexion utilisable dans la pratique.

Answer 2

Au début, la réponse de j2L4e n'a pas fonctionné pour moi (test dans Chrome). J'ai légèrement modifié la réponse en entourant mon bool entre parenthèses dans le ngIf et cela a fini par fonctionner.

<md-icon class="connected" mdTooltip="No Connection" *ngIf="!(isConnected | async)">signal_wifi_off</md-icon>

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/Rx';

@Component({
  selector: 'toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css']
})
export class ToolbarComponent implements OnInit {
  isConnected: Observable<boolean>;

  constructor() {
    this.isConnected = Observable.merge(
      Observable.of(navigator.onLine),
      Observable.fromEvent(window, 'online').map(() => true),
      Observable.fromEvent(window, 'offline').map(() => false));
  }

  ngOnInit() {

  }
}

Answer 3

Comme je l'ai vérifié, le navigateur est un objet global comme la fenêtre. Vous pouvez l'utiliser dans angular2 et cela a bien fonctionné pour moi.

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template:`
navigator.onLine
{{onlineFlag}}

`
})
export class AppComponent {
  public onlineFlag =navigator.onLine;
}

Answer 4

Utilisation de Angular 6+ y Rxjs 6+ vous pouvez le faire de la manière suivante :

import { Observable, fromEvent, merge, of } from 'rxjs';
import { mapTo } from 'rxjs/operators';

online$: Observable<boolean>;

constructor() {
  this.online$ = merge(
    of(navigator.onLine),
    fromEvent(window, 'online').pipe(mapTo(true)),
    fromEvent(window, 'offline').pipe(mapTo(false))
  )
}

Voici un Démonstration (activer le réseau dans les outils de développement)

Answer 5

Allez-y avec ce simple Hack.

Travailler en angular 5 ou plus

 constructor(){
    setInterval(()=>{
       if(navigator.onLine){
         //here if it is online
       }else{
        //here if it is offline
       }
    }, 100)
 }

écrivez ceci dans le constructeur de app.component.ts ou dans le bootstrap de votre application. Pas besoin d'une bibliothèque externe.