web-dev-qa-db-fra.com

Jak sprawdzić, commentez-vous votre site internet Angular2?

Vous êtes ici: Vous êtes le premier à donner votre avis sur le statut de votre site? albo coś innego?

PS: - znalazłem navigator.onLine w angularJs, ale wydaje się, Aucune nouvelle publication w angular2.

aktualizacja

jak zasugerował w odpowiedzi poniżej navigator.onLine w pracy z angular2, ale nadal nie działa poprawnie dlaczego? working example here

httpangular
31
Pardeep Jain

(2018) Code mis à jour pour rxjs6

Cela fonctionne totalement avec angular2. Il est évident que c'est 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))
    );
  }
}
29
j2L4e

Comme je l'ai coché, le navigateur est un objet global comme une fenêtre. Vous pouvez utiliser in 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;
}
8
sudheer KB

En utilisant Angular 6+ et 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 demo (basculer le réseau dans les outils de développement)

5
Michael Doye

Approche sûre pour écouter les états du réseau

Les réponses données ci-dessus fonctionnent bien mais ne sont pas considérées comme une approche sûre.

1.Les objets dépendants du navigateur tels que window ne doivent pas être référencés directement. Vérifiez toujours la plate-forme. 

2. En outre, des fonctionnalités telles que la connexion réseau doivent être encapsulées dans un service. 

Ci-dessous, le ConnectionService qui peut être abonné pour écouter les états du réseau. Il suit le style rxjs 6 .

Code complet 

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { Observable, fromEvent, merge, empty } from 'rxjs';
import { isPlatformBrowser } from '@angular/common';
import { mapTo } from 'rxjs/operators';

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

  private connectionMonitor: Observable<boolean>;

  constructor(@Inject(PLATFORM_ID) platform) {
if (isPlatformBrowser(platform)) {
  const offline$ = fromEvent(window, 'offline').pipe(mapTo(false));
  const online$ = fromEvent(window, 'online').pipe(mapTo(true));
  this.connectionMonitor = merge(
    offline$, online$
  );
} else {
  this.connectionMonitor = empty();
}



 }

  monitor(): Observable<boolean> {
    return this.connectionMonitor;
  }
}

dans le composant, vous pouvez écouter en vous abonnant à monitor () ou directement en HTML à l'aide d'un canal asynchrone.

0
abhay tripathi

Aller avec ce simple piratage.

Travailler dans 5 angulaire ou plus tard

 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 votre application bootstrapPas besoin de bibliothèque externe ..

0
nilesh121196