Как проверить подключение к Интернету в AngularJs

Ответ 1

Прежде всего, я советую вам слушать онлайн-или офлайн-события.

Вы можете сделать это в AnguarJS:

var app = module('yourApp', []);

app.run(function($window, $rootScope) {
      $rootScope.online = navigator.onLine;
      $window.addEventListener("offline", function() {
        $rootScope.$apply(function() {
          $rootScope.online = false;
        });
      }, false);

      $window.addEventListener("online", function() {
        $rootScope.$apply(function() {
          $rootScope.online = true;
        });
      }, false);
});

ПРИМЕЧАНИЕ. Я переношу изменение переменной области корня в метод $apply, чтобы уведомить Angular, что что-то было изменено.

После этого вы можете:

В controlller:

$scope.$watch('online', function(newStatus) { ... });

В разметке HTML:

 <div ng-show="online">You're online</div>
 <div ng-hide="online">You're offline</div>

Вот рабочий Plunker: http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

Другим решением может быть передача в эфир/офлайн-событие. Но в этом случае вам нужно инициализировать текущий статус при загрузке, а затем подписаться на событие.

Ответ 2

Это определенно не так хорошо, но вы можете просто попробовать запрос AJAX на свой веб-сервер; это будет либо успешным, либо тайм-аутом.

Кроме того, проект HubSpot/offline выглядит действительно хорошо.

Ответ 3

Ваши варианты:

• addEventListener в окне, документе или документе .body.

• настройка свойств .ononline или .onoffline на документе или
  document.body к объекту функции JavaScript.

• указание атрибутов ononline = "..." или onoffline = "..." в теге в разметка HTML

Я продемонстрирую самый простой.

В контроллере

document.body.onoffline = function() {
   alert('You are offline now');
   $scope.connection = 'offline' 
}

document.body.ononline = function() {
   alert('You are online again');
   $scope.connection = 'online' 
}

Проверяйте переменную $scope.connection, прежде чем пытаться отправлять запросы.

Ответ 4

Мы можем сделать это просто используя HostListener-Events. Мы можем использовать его, импортировав из @angular/core.

https://angular.io/api/core/HostListener

проверьте приведенную выше ссылку для более подробной информации, мы можем использовать "window: offline" и "window: online" вместо функции navigator.online, чтобы инициировать события, которые автоматически прослушиваются, если есть подключение к Интернету или нет. Исходя из этого, мы можем прикрепить вышеуказанные события в форме отображения сообщений либо в тостере, либо в диалоговом окне, либо как угодно.

В качестве примера:

import { Component, HostListener } from "@angular/core";
import { Subscription } from "rxjs";
import { Observable } from "rxjs/Observable";

@Component({

selector: 'app-online-offline',
templateUrl: './online-offline.component.html',
styleUrls: ['./online-offline.component.css']
})
export class OnlineOfflineComponent {
public isOnline: boolean;
public showConnectionStatus: boolean;
private showConnectionStatusSub: Subscription;
private showConnectionStatusTimer: Observable<any>;

constructor() {
    this.showConnectionStatusTimer = Observable.timer(5000);
}

@HostListener('window:offline', ['$event']) onOffline() {
    this.isOnline = false;
    this.showConnectionStatus = true;
    if (this.showConnectionStatusSub) {
        this.showConnectionStatusSub.unsubscribe();
    }
}

@HostListener('window:online', ['$event']) onOnline() {
    this.isOnline = true;
    this.showConnectionStatus = true;
    this.showConnectionStatusSub = this.showConnectionStatusTimer.subscribe(() => {
        this.showConnectionStatus = false;
        this.showConnectionStatusSub.unsubscribe();
        window.location.reload();
    });
}

ngOnDestroy(): void {
    if (this.showConnectionStatusSub) {
        this.showConnectionStatusSub.unsubscribe();
    }
}

}