Обобщить/Создать сервис с (window, 'resize') | Angular 8
Для реактивного изменения активного html блока для адаптивного интерфейса я использую следующий код
<div class="p-0 m-0" *ngIf="!mobileMode">
</div>
<div class="p-0 m-0" *ngIf="mobileMode">
</div>
import { Observable, Subscription, fromEvent } from 'rxjs';
export class FullStackComponent implements OnInit, OnDestroy {
resizeObservable$: Observable<Event>;
resizeSubscription$: Subscription;
mobileMode = false;
ngOnInit() {
this.checkResolution();
this.resizeObservable$ = fromEvent(window, 'resize');
this.resizeSubscription$ = this.resizeObservable$.subscribe(evt => {
this.checkResolution();
});
}
checkResolution() {
const width = window.innerWidth;
if (width < 1024) {
this.mobileMode = true;
} else {
this.mobileMode = false;
}
}
ngOnDestroy() {
this.resizeSubscription$.unsubscribe();
}Работает хорошо. Но вот у меня около 30 страниц и компонентов. Заталкивать такое в каждый компонент не хотелось бы. Как можно это все вынести в сервис. Ведь как я понимаю в сервисе нету OnInit. Возможно использовать не сервис а дерективу, которая будет прятать блок. Для справки, ранее использовал ngx-responsive, но данная библиотека не реактивна и меняет блок только при загрузке а не изменения браузера в живую в итоге я изменил на такой вариант.