Angular2获取窗口宽度onResize

Question

试图找出如何在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,以便我可以在模板中访问它.我在这里做错了什么想法？

谢谢!

Answer 1

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

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

获取有关组件模板中子元素的滚动事件的通知

或者监听组件主机元素本身

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

Answer 2

使用NgZone触发变化检测:

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

Answer 3

在这种情况下,您需要手动运行更改检测.当您从Angular的外部上下文修改组件变量时,基本上resize事件不会被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
      };
    }
}

相反,我想建议你去寻找更清洁的答案