Comment vérifier si l'utilisateur dispose d'une connexion internet ou non en Angular2?
comment je vérifierais la connexion Internet dans Angular2 au moment de la frappe de L'API, chaque fois que dans mon application L'API est touchée sur le serveur parfois l'utilisateur est hors ligne (je veux dire sans connexion internet) alors comment puis-je vérifier la connectivité internet ? existe-t-il un code de statut spécial pour la connectivité internet ? ou quelque chose d'autre ?
PS:- j'ai trouvé navigator.onLine à angularJs mais ne semble pas fonctionner à angular2.
mise à jour
comme sudheer l'a suggéré dans la réponse ci-dessous navigator.onLine en travaillant avec angular2 mais en ne travaillant toujours pas correctement pourquoi ?
exemple ici
5 réponses
(2018) Code mis à jour pour rxjs6
Il fonctionne totalement avec angular2. Évidemment, c'est différent de angularJS parce que ni $scope ni $apply n'existent plus. RxJS rend cela facile, cependant! Testé sur Chrome 53:
modèle:
<p>{{online$ | async}}</p>
composant:
import { 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))
);
}
}
<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() {
}
}
comme j'ai vérifié, navigator est un objet global comme une fenêtre. Vous pouvez utiliser dans angular2 et il 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;
}
en utilisant angulaire 6+ et Rxjs 6+, vous pouvez le faire de la façon 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émo (commutateur réseau dans les outils de dev)
Utilisez ceci.
Sans bibliothèque externe.
public isOnline: boolean = navigator.onLine;
ngOnInit() {
console.log(this.isOnline);
}