Как проверить, имеет ли пользователь подключение к Интернету или нет в Angular2?

Как я могу проверить подключение к Интернету в Angular2 во время атаки API, всякий раз, когда в моем приложении API попадает на сервер, иногда пользователь offline (я имею в виду без подключения к интернету), так как я могу проверить подключение к Интернету? есть ли специальный код статуса для подключения к Интернету? или что-то другое?

PS: - я нашел navigator.onLine в angularJs, но, похоже, не работает в angular2.

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

Обновление

как sudheer предложил в ответе ниже navigator.onLine при работе с Angular2, но все же не работает должным образом, почему? рабочий пример здесь

Ответ 1

Он полностью работает с angular2. Очевидно, это отличается от angularJS, потому что ни $scope, ни $apply больше не существуют. RxJS делает это легко! Протестировано на Chrome 53:

шаблон:

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

контроллер:

online$: Observable<boolean>;

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

Ответ 2

Сначала ответ j2L4e не работал у меня (тестирование в Chrome). Я слегка подделал, окружив свой bool в скобках в ngIf, и это закончилось тем, что работало.

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

  }
}

Ответ 3

Как я заметил, навигатор - это глобальный объект, такой как окно. Вы можете использовать его в angular2, и он отлично работает для меня.

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

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