CSS Angular2 获取窗口宽度 onResize
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35527559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 get window width onResize
提问by Spencer Bigum
Trying to figure out how to get window width on resizing events in Angular2. Here is my code:
试图弄清楚如何在 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());
};
}
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
我正在 bootstrap.ts 文件中全局导入窗口提供程序，使用提供来获取我的应用程序到窗口的访问权限。我遇到的问题是这确实给了我一个窗口大小，但是在调整窗口大小时 - 即使窗口改变大小，它也会一遍又一遍地重复相同的大小。请参阅 console.log 示例的图像： 屏幕截图图像
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?
我的总体目标是能够将窗口编号设置为变量 onresize，以便我可以在模板中访问它。关于我在这里做错了什么的任何想法？
Thanks!
谢谢！
回答by Günter Z?chbauer
<div (window:resize)="onResize($event)"
onResize(event) {
event.target.innerWidth;
}
to get notified on scroll events on a child element in a components template
在组件模板中的子元素上获得滚动事件通知
or listen on the components host element itself
或侦听组件宿主元素本身
@HostListener('window:resize', ['$event'])
onResize(event) {
event.target.innerWidth;
}
回答by pixelbits
Use NgZoneto trigger change detection:
使用NgZone以触发变化检测：
constructor(ngZone:NgZone) {
window.onresize = (e) =>
{
ngZone.run(() => {
this.width = window.innerWidth;
this.height = window.innerHeight;
});
};
}
回答by Pankaj Parkar
In this case you need to run change detection manually. As you are modifying component variable from outer context of Angular, basically resize event doesn't get monkey patched by Angular2 change detection system.
在这种情况下，您需要手动运行更改检测。当您从 Angular 的外部上下文修改组件变量时，基本上 resize 事件不会被 Angular2 更改检测系统修补。
Code
代码
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
};
}
}
Rather I'd like to suggest you to go for this answer, which looks more cleaner
相反，我想建议你去寻找这个答案，它看起来更干净
