Question

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

Answer 1

要收听并做出改变，您需要一个事件处理程序。在Angular中，Observables最好

要获得有关应用上线或离线的通知，请依赖online/offline events

online$ = fromEvent(window, 'online');
offline$ = fromEvent(window, 'offline');

将您的其他活动链接到这些：

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

另请参阅有关navigator.onLine的文章。请注意，浏览器不会统一实现此事件。在某些情况下，“在线”只意味着浏览器连接到本地网络，而不是互联网。要获得更可靠的信息，您可能需要在事件触发时尝试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。

Answer 2

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

Answer 3

具有基本javascript功能的另一种解决方案。在app.component.ts文件中使用以下代码

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

Answer 4

安全的方法来监听网络状态

上面给出的答案很好用，但不是安全的方法。

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



 }

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

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

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

4 个答案: