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

Question

如何在API打击时检查Angular2中的互联网连接，每当我的应用程序API被打到服务器时，有时用户是 离线（我的意思是没有互联网连接），那么我将如何检查互联网连接？是否有一些特殊的互联网连接状态代码？ 还是别的？

PS： - 我在angularJs中发现了navigator.onLine，但在angular2中似乎不起作用。

• 来源 - How to check internet connection in AngularJs

更新

如sudheer建议如下navigator.onLine答案与angular2工作，但仍然无法正常工作，为什么？ working example here

Answer 1

正如我检查导航器是像窗口的全局对象。你可以在angular2中使用它，它对我来说工作得很好。

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

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

Answer 2

它完全适用于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) 
) 
} 

Answer 3

起初，j2L4e的回答并没有为我（在Chrome测试）工作。我在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() { 

    } 
}