试图弄清楚如何在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示例,请参阅图像: Screenshot image
我的总体目标是能够将窗口编号设置为变量onresize,以便我可以在模板中访问它。关于我在这里做错了什么想法?
谢谢!
答案 0 :(得分:53)
<div (window:resize)="onResize($event)"
onResize(event) {
event.target.innerWidth;
}
获取有关组件模板中子元素的滚动事件的通知
或听取组件主机元素本身
@HostListener('window:resize', ['$event'])
onResize(event) {
event.target.innerWidth;
}
答案 1 :(得分:20)
使用Jsoup
触发更改检测:
NgZone
答案 2 :(得分:7)
在这种情况下,您需要手动运行更改检测。当您从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
};
}
}
相反,我建议你去this answer,看起来更干净