30

试图弄清楚如何在 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，以便我可以在模板中访问它。关于我在这里做错了什么的任何想法？

谢谢！

4

3 回答 3

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

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

在组件模板中的子元素上获得滚动事件通知

或监听组件宿主元素本身

@HostListener('window:resize', ['$event'])
onResize(event) {
  event.target.innerWidth; 
}
于 2016-02-20T18:56:49.883 回答
21

用于NgZone触发变更检测：

constructor(ngZone:NgZone) {
    window.onresize = (e) =>
    {
        ngZone.run(() => {
            this.width = window.innerWidth;
            this.height = window.innerHeight;
        });
    };
}
于 2016-02-21T06:26:13.387 回答
7

在这种情况下，您需要手动运行更改检测。当您从 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
      };
    }
}

相反，我想建议你去这个答案，它看起来更干净

于 2016-02-20T19:04:10.437 回答