Использование Angular для определения статуса сетевого подключения — онлайн/офлайн
angular angular-development

Использование Angular для определения статуса сетевого подключения — онлайн/офлайн

8 декабря 2022 г.

Возможно, мы все знакомы с JavaScript-способом проверки статуса Online/Offline. Но в случае с Angular нам нужно правильно отписывать события, которые мы слушаем. В противном случае это может привести к ненужному поведению и утечке памяти.

Обычный JS

window.addEventListener("load", () => {
  this.networkStatus = navigator.onLine

  window.addEventListener("online", () => {
    this.networkStatus = true
  });

  window.addEventListener("offline", () => {
    this.networkStatus = false
  });
});

Угловой путь

import { Component, OnDestroy, OnInit, VERSION } from '@angular/core';

import { fromEvent, merge, of, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  networkStatus: boolean = false;
  networkStatus$: Subscription = Subscription.EMPTY;

  constructor() {}

  ngOnInit(): void {
    this.checkNetworkStatus();
  }

  ngOnDestroy(): void {
    this.networkStatus$.unsubscribe();
  }

  checkNetworkStatus() {
    this.networkStatus = navigator.onLine;
    this.networkStatus$ = merge(
      of(null),
      fromEvent(window, 'online'),
      fromEvent(window, 'offline')
    )
      .pipe(map(() => navigator.onLine))
      .subscribe(status => {
        console.log('status', status);
        this.networkStatus = status;
      });
  }
}

Вы можете посмотреть демонстрацию здесь.

или проверьте код здесь

Удачного кодирования!!! 🎉🎉🎉

Также опубликовано здесь.< /а>

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE