如何在Angular 2中检测网络连接？

我正在尝试编写一个组件，该组件将检测应用程序是在线还是离线，以便它可以触发另一个事件。是否有可以利用的内置功能？

• 要倾听变化并对其作出反应，您需要一个事件处理程序。在角度上，可观测的是最好的
• 要获得应用程序上线或离线的通知，请依赖

将您的其他活动链接到以下各项：

online$.subscribe(e => this.syncWithServer());

另请参阅这篇关于的文章。请注意，浏览器并不统一地实现此事件。在某些情况下，“在线”只是指浏览器连接到本地网络，而不是internet。为了获得更可靠的信息，您可能需要在事件触发时尝试ping远程服务器来进行测试

online$ = fromEvent(window, 'online').pipe(
            switchMap(e => this.pingServer()),
            filter(e => e)
          );

offline$ = fromEvent(window, 'offline').pipe(
            switchMap(e => this.pingServer()),
            filter(e => !e)
          );

---

其中，

pingServer

将发出远程请求，并在请求成功时返回发出

true

的可观测值，否则返回

false

。

监听网络状态的安全方法

export class HomeComponent implements OnInit {
   public isOnline : boolean = navigator.onLine;
}

以上给出的答案效果良好，但不被认为是安全的方法

1.不应直接引用浏览器相关对象，请始终检查平台

2.此外，网络连接等功能必须封装到服务中

下面是可以订阅以侦听网络状态的ConnectionService。它遵循rxjs 6风格

完整代码

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(startWith(!window.navigator.onLine), mapTo(false));
  const online$ = fromEvent(window, 'online').pipe(startWith(window.navigator.onLine), mapTo(true));
  this.connectionMonitor = merge(
    offline$, online$
  );
} else {
  this.connectionMonitor = EMPTY;
}



 }

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

从'@angular/core'导入{Injectable，injection，PLATFORM_ID}；
从“rxjs”导入{Observable，fromEvent，merge，EMPTY}；
从“@angular/common”导入{isPlatformBrowser}；
从“rxjs/operators”导入{mapTo}；
@注射的({
providedIn:'根'
})
导出类连接服务{
专用连接监视器：可观察；
构造函数（@Inject（PLATFORM_ID）PLATFORM）{
if（iPlatformBrowser（平台））{
const offline$=fromEvent（window，'offline'）.pipe（startWith（！window.navigator.onLine），mapTo（false））；
const online$=fromEvent（window，'online'）.pipe（startWith（window.navigator.online），mapTo（true））；
this.connectionMonitor=合并(
离线$，在线$
);
}否则{
this.connectionMonitor=空；
}
}
监视器（）：可观察{
返回此.connectionMonitor；
}
}

---

在组件中，您可以通过订阅monitor（）或使用异步管道直接进入HTML进行侦听。

另一个具有基本

javascript

函数的解决方案。在

app.component.ts

文件中使用以下代码

constructor() {
    window.addEventListener("online", () => {
        alert ("Your browser is working online.");
    });
    window.addEventListener("offline", () => {
        alert ("Your browser is working offline.");
    });
}

---

去除

可观察的.fromEvent不是函数错误

；您应该订阅

formEvent

本身。。。。我使用：

fromEvent（window，'offline'）。订阅（（）=>{this.isOnline=false}）

谢谢。这个答案大约在一年前发表。我已经将其更新为使用RxJS 6语法（可通过管道传输的运算符）@belletJuice我正在使用

HttpInterceptor

来检查互联网连接，但无法使用您的代码。您能解释一下在哪里添加这些函数吗？这是最好的答案。仅依赖在线或离线是不够的（例如，将开发工具切换到离线不会将在线$仅更改为离线$，因此需要合并）。绑定组件就像

connection.monitor（）| async

一样简单。谢谢。我必须通过管道传递初始值（第一次加载时不会发出任何信息）：

startWith（！window.navigator.onLine）

和

startWith（window.navigator.onLine）

。

constructor() {
    window.addEventListener("online", () => {
        alert ("Your browser is working online.");
    });
    window.addEventListener("offline", () => {
        alert ("Your browser is working offline.");
    });
}