Angular2 получить ширину окна onResize

Попытка выяснить, как получить ширину окна при изменении размера событий в Angular2. Вот мой код:

export class SideNav {

    innerWidth: number;

    constructor(private window: Window){

        let getWindow = function(){
          return window.innerWidth;
        };

        window.onresize = function() {
          this.innerWidth = getWindow();
          console.log(getWindow());
        };
}

Я импортирую поставщика окна по всему миру в файле bootstrap.ts, чтобы обеспечить доступ к моему окну. Проблема, с которой я столкнулась, - это размер окна, но при изменении размера окна - он повторяется один и тот же размер снова и снова, даже если окно меняет размер. См. Изображение для примера console.log: Снимок экрана

Моя общая цель - установить номер окна для переменной onresize, чтобы я мог получить к ней доступ в шаблоне. Любые идеи о том, что я делаю неправильно здесь?

Спасибо!

Ответы

Ответ 1

<div (window:resize)="onResize($event)"

onResize(event) {
  event.target.innerWidth; 
}

чтобы получать уведомления о событиях прокрутки дочернего элемента в шаблоне компонентов

или прослушать сам элемент хоста компонентов

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

Ответ 2

Используйте NgZone для запуска обнаружения изменений:

constructor(ngZone:NgZone) {
    window.onresize = (e) =>
    {
        ngZone.run(() => {
            this.width = window.innerWidth;
            this.height = window.innerHeight;
        });
    };
}

Ответ 3

В этом случае вам нужно вручную запустить обнаружение изменений. Когда вы изменяете переменную компонента из внешнего контекста Angular, в основном событие изменения размера не получает обезьяну, исправленную системой обнаружения изменений Angular2.

код

import {ChangeDetectorRef} from 'angular2/core'

export class SideNav {
    innerWidth: number;

    constructor(private window: Window, private cdr: ChangeDetectorRef){

       let getWindow = () => {
          return window.innerWidth;
       };

      window.onresize = () => {
          this.innerWidth = getWindow();
          this.cdr.detectChanges(); //running change detection manually
      };
    }
}

Скорее я хотел бы предложить вам перейти на этот ответ, который выглядит более чистым