基于窗口大小在角度2中使用模板

在我的模板上，我有2个div。一个用于表格视图（笔记本电脑）和一个用于列表视图（移动视图）。基于窗口大小在角度2中使用模板

在我的.ts文件中，我想获得窗口大小，以便根据这个大小，我可以选择使用ngIf调用哪个div。

在的.ts文件的构造函数中，我有：

let windowSize: number; 
this.windowSize = innerWidth + innerHeight; 
window.addEventListener("resize", function() { 
    this.windowSize = innerWidth + innerHeight"; 
});

但是，当我CONSOLE.LOG（）this.windowSize，我不得到改变，当窗口大小。我错过了什么？

来源

2016-07-22 user3344978

你不需要它。 HTML5为您提供了基本的视口支持。你可以使用它。所以当你调整窗口大小时，你会自动获得笔记本电脑和平板电脑的屏幕尺寸。 – micronyks

使用NgZone解决了这个问题。在我的构造函数注入NgZone，并用它作为：

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

通过这样做，我能为您在我的组件窗口中的变化。我不能使用媒体查询，因为我必须根据窗口大小更改执行我的.ts文件中的函数。

来源

2016-10-03 15:23:52 user3344978

这可以用简单的CSS设置：

@media (min-width: 500px) and (max-width: 700px) { 
    .div1 { 
     display: none; 
    } 

@media (min-width: 701px) and (max-width: 900px) { 
    .div2 { 
     display: none; 
    }

来源

2016-07-22 17:55:09 Avi

基于窗口大小在角度2中使用模板

回答

相关问题