如何在Angular2中检查用户是否有互联网连接？

Question

如何在API点击时检查Angular2中的互联网连接,每当我的应用程序API被命中服务器时,有时用户离线(我的意思是没有互联网连接)所以我如何检查互联网连接？是否有一些特殊的互联网连接状态代码？或者是其他东西 ？

PS: - 我navigator.onLine在angularJs中发现但似乎没有在angular2中工作.

• 来源 - 如何检查AngularJs中的互联网连接

更新

正如sudheer在下面的回答中建议navigator.onLine使用angular2但仍然无法正常工作原因？ working example here

Answer 1

(2018)针对rxjs6更新了代码

它完全适用于angular2.显然它与angularJS不同,因为$ scope和$ apply都不再存在.不过,RxJS让这很简单!在Chrome 53上测试过:

模板:

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

零件:

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))
    );
  }
}

Answer 2

起初,j2L4e的答案对我不起作用(在Chrome中测试).我通过在ngIf的括号中包围我的bool来略微调整,这最终起作用了.

<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

因为我已经检查过导航器是像窗口一样的全局对象.你可以在angular2中使用它,它对我来说很好.

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

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

Answer 4

使用Angular 6+和Rxjs 6+,您可以通过以下方式完成:

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))
  )
}

这是一个演示(开发工具中的切换网络)