Как я могу мгновенно определить размер окна в angular 2?

некоторые функции включения или выключения моего компонента зависят от размера браузера, поэтому я хочу проверить ширину браузера при изменении размера, но я могу сделать это с помощью метода On Init, но мне нужно обновить браузер, когда изменение размера произошло для обновления ширины браузера

 ngOnInit() {
     if (window.innerWidth <= 767){
       ---- do something
      }
   }

однако я попытался использовать метод OnChanges, но он не работает ни

OnChanges(changes:SimpleChanges){
console.log( 'width:====>' + changes[window.innerWidth].currentValue);
  if ( changes[window.innerWidth].currentValue <= 767 ){
      ---- do something
}

}

Есть ли какие-либо предложения или альтернативный способ сделать это?

Ответ 1

Вы можете просто поместить обработчик в resize событие поверх объекта window, но это позволит вам разместить только одно событие resize, последнее зарегистрированное событие на onresize будет работать.

constructor(private ngZone:NgZone) {
    window.onresize = (e) =>
    {
        //ngZone.run will help to run change detection
        this.ngZone.run(() => {
            console.log("Width: " + window.innerWidth);
            console.log("Height: " + window.innerHeight);
        });
    };
}

Чтобы сделать более angular способ использования @HostListener('window:resize') внутри вашего компонента, что позволит вызвать функцию изменения размера (на которой <декоратор декорирования HostListner) на resize окна.

@HostListener('window:resize', ['$event'])
onResize(event){
   console.log("Width: " + event.target.innerWidth);
}

Ответ 2

Использовать HostListener. Вероятно, вы должны отказаться от события изменения размера, но прежде чем что-либо сделать, он будет запускать каждый раз изменения размера, которые могут быть десятками или сотнями раз за несколько миллисекунд, когда пользователь перетаскивает размер окна.

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

@Component({...})
class TestComponent {
    @HostListener('window:resize')
    onWindowResize() {
        //debounce resize, wait for resize to finish before doing stuff
        if (this.resizeTimeout) {
            clearTimeout(this.resizeTimeout);
        }
        this.resizeTimeout = setTimeout((() => {
            console.log('Resize complete');
        }).bind(this), 500);
    }
}

Ответ 3

Более простой способ - использовать метод изменения размера в html-блоке, который вы хотите обнаружить:

<div class="some-class" (window:resize)="onResize($event)">...</div>

Затем в вашем файле .ts вы можете просто добавить:

onResize(event) {

   const innerWidth = event.target.innerWidth;
   console.log(innerWidth);

   if (innerWidth <= 767) {
      ...do something
   }
}

Добавьте вне ngOnInit() {}, если вам не нужен размер окна при загрузке страницы.

При изменении размера окна вы увидите console.log