Обнаружение изменения размера окна в Angular 4 в реальном времени

Быстрый ответ

Для отслеживания изменений размера окна в Angular используйте декоратор HostListener из пакета @angular/core. Пример его применения в Angular компоненте выглядит следующим образом:

import { HostListener } from '@angular/core';

export class AppComponent {
  @HostListener('window:resize')
  onWindowResize() {
    // Окно изменило размер, применяем соответствующие действия!
    this.adjustLayout(window.innerWidth);
  }

  adjustLayout(width) {
    // Адаптируем макет в соответствии с шириной окна
  }
}

Такой подход поможет реагировать на изменение размера окна и адекватно адаптировать интерфейс.

Управление адаптивностью и оптимизация производительности

Повышение эффективности с помощью BehaviorSubject

Для более эффективного отслеживания изменений размера окна рекомендуется использовать BehaviorSubject из библиотеки rxjs. Это поможет избежать лишних подписок на события изменения размера в каждом компоненте.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WindowSizeService {
  private windowSize = new BehaviorSubject<{ width: number, height: number }>({ width: window.innerWidth, height: window.innerHeight });

  get size() {
    return this.windowSize.asObservable();
  }

  updateSize() {
    this.windowSize.next({ width: window.innerWidth, height: window.innerHeight });
  }
}

Далее в компоненте осуществляем подписку на размер окна:

constructor(private windowSizeService: WindowSizeService) {}

ngOnInit() {
  this.windowSizeService.size.subscribe(size => {
    this.adjustLayout(size.width);
  });
}

Подробнее об этом расскажет наш спикер на видео

Ограничение частоты событий изменения размера

Чтобы улучшить производительность, примените debounceTime для снижения числа обрабатываемых событий изменения размера.

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

fromEvent(window, 'resize')
  .pipe(debounceTime(150))
  .subscribe(event => this.onWindowResize(event));

Правила хорошего тона: отписка от событий

Не забудьте про отписку от Observable в методе ngOnDestroy() для предотвращения утечек памяти.

import { Subscription } from 'rxjs';

private subscription: Subscription;

ngOnInit() {
  this.subscription = this.windowSizeService.size.subscribe(size => {
    this.adjustLayout(size.width);
  });
}

ngOnDestroy() {
  this.subscription.unsubscribe();
  // Теперь все чисто и аккуратно!
}

Управление контрольными точками

BreakpointObserver из Angular CDK

Для более гибкого управления адаптивностью вашего приложения, используйте BreakpointObserver из @angular/cdk/layout.

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

constructor(private breakpointObserver: BreakpointObserver) {}

ngOnInit() {
  this.breakpointObserver.observe([
    Breakpoints.Small,
    Breakpoints.Medium,
    Breakpoints.Large
  ]).subscribe(result => {
    if (result.matches) {
      this.adjustLayoutBasedOnBreakpoint(result);
    }
  });
}

Комфортное взаимодействие: Angular-сервисы вместо медиа-запросов

Перейдите на использование Angular-сервисов и утилит CDK, заменив ими CSS медиа-запросы. Это упрощает динамическое масштабирование элементов и более гармонично вписывается в жизненный цикл приложения.

Визуализация

Представьте отслеживание изменений размера окна в Angular как адаптивное пространство концертного зала:

Перед началом концерта зал готовит места под начальное количество зрителей:

// Angular выступает в роли директора, контролирующего количество зрителей.

@HostListener('window:resize', ['$event'])
onResize(event) {
  // Директор управляет вместимостью зала в соответствии с числом зрителей.
  this.stageSize = { width: event.target.innerWidth, height: event.target.innerHeight };
}

Изменения числа зрителей происходят в реальном времени и зал адаптируется под них:

🎪💨👫👬👭 => Зал расширяется по мере прибытия зрителей 🎪💔👤 => Зал сжимается, когда зрители уходят

Таким образом, заботливый директор следит за комфортом каждого зрителя, делая весь процесс незаметным и плавным.

Продвинутые темы

Кеширование для оптимизации производительности

В качестве меры оптимизации производительности рекомендуется кэшировать начальные значения window.innerWidth и window.innerHeight.

private cachedWidth = window.innerWidth;

get currentWidth() {
  return this.cachedWidth;
}

@HostListener('window:resize', ['$event'])

onResize(event) {
  debounceTime(100);
  this.cachedWidth = event.target.innerWidth;
}

Динамические элементы интерфейса как альтернатива медиа-запросам

Отправьте в прошлое CSS медиа-запросы, когда можно использовать динамические элементы интерфейса благодаря условиям *ngIf.

<nav *ngIf="currentWidth > breakpoint">
  <!-- Меню на полную ширину -->
</nav>
<nav *ngIf="currentWidth <= breakpoint">
  <!-- Мобильное меню -->
</nav>

Особенности работы на различных платформах

Разработчики Ionic и других гибридных приложений могут использовать методы platform.width() и platform.height() для определения размеров окна, учитывая особенности различных платформ и устройств.

Обработка ошибок при работе с сервисами

Не забывайте обработку ошибок при работе с сервисами, чтобы корректно управлять возможными исключениями.

this.subscription = this.windowSizeService.size.subscribe({
  next: size => this.adjustLayout(size.width),
  error: err => handleWindowSizeError(err)
});

function handleWindowSizeError(error) {
  // Адекватно реагируем на ошибку
}

Полезные материалы

1. Angular API – Документация HostListener — официальная документация Angular для @HostListener.
2. Изучаем RxJS – fromEvent — глубокое погружение в работу оператора fromEvent из RxJS для обработки событий, включая изменение размера окна.
3. Статья на Medium про HostListener — подробное руководство по использованию HostListener для отслеживания события изменения размера окна в Angular.
4. Angular – Взаимодействие компонентов — изучение взаимодействия между компонентами при помощи Observables и Subjects.
5. CSS-Tricks – Объяснение Debouncing и Throttling — разъяснение концепций debouncing и throttling, применяемых для оптимизации обработки событий изменения размера.
6. MDN Веб-документация – Событие Window: resize — MDN документация о событии изменения размера окна и его применении в веб-разработке.