angular - 使用 Angular 4 检查网络中的互联网连接

Question

我正在使用 Angular 4 开发应用程序。我需要检查网络连接是否可用，因为它有任何使用 Angular 的连接问题。 Angular 4 有可能吗？

我检查了 https://github.com/HubSpot/offline 。我认为这不适用于 Angular 4。任何人都请提出建议。是否可以将 offlinejs 用于 Angular 4 或任何其他替代方案？

谢谢萨拉斯 C M

Answer 1

为此我们不需要任何库，但是 public onlineOffline: boolean = navigator.onLine; 可以解决问题，但这只是一次性检查。我们需要将此值视为可观察值，以便每当在线状态发生变化时我们都会更新。为此，rxjs 会有所帮助。

导入这些

import { Observable, Observer, fromEvent, merge } from 'rxjs';
import { map } from 'rxjs/operators';

添加这个方法

  createOnline$() {
    return merge<boolean>(
      fromEvent(window, 'offline').pipe(map(() => false)),
      fromEvent(window, 'online').pipe(map(() => true)),
      new Observable((sub: Observer<boolean>) => {
        sub.next(navigator.onLine);
        sub.complete();
      }));
  }

从你的构造器或 ngOnInit 订阅这个事件

this.createOnline$().subscribe(isOnline => console.log(isOnline));

注意:我使用的是 Angular 8.1 和 rxjs 6.5.2