Angular2获取窗口宽度onResize [英] Angular2 get window width onResize

问题描述

尝试弄明白如何获取窗口宽度调整Angular2中的事件。这是我的代码：

Trying to figure out how to get window width on resizing events in Angular2. Here is my code:

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示例图片：
屏幕截图图片

I am importing window provider globally in the bootstrap.ts file using provide to gain access across my app to window. The problem I am having is this does give me a window size, but on resizing the window - it just repeats the same size over and over even if the window changes size. See image for console.log example: Screenshot image

我的总体目标是能够将窗口编号设置为一个变量onresize，所以我可以在模板中访问它。关于我在这里做错了什么想法？

My overall goal is to be able to set the window number to a variable onresize so I can have access to it in the template. Any ideas on what I am doing wrong here?

谢谢！

推荐答案

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

或

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

这篇关于Angular2获取窗口宽度onResize的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！