Использование 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;
});
}
}
Вы можете посмотреть демонстрацию здесь.
или проверьте код здесь
Удачного кодирования!!! 🎉🎉🎉
Также опубликовано здесь.< /а>
Оригинал