Javascript 基于窗口大小在angular 2中使用模板

在我的模板上，我有两个div。一个用于表视图（笔记本电脑）和一个用于列表视图（移动视图）

在我的.ts文件中，我希望获得窗口大小，以便基于此大小，我可以选择使用ngIf调用哪个div

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

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

---

但是当我console.log（）this.windowSize时，当窗口调整大小时，我不会得到更改。我缺少什么？

这可以通过简单的css设置：

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

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

---

通过使用NgZone解决了此问题。在我的构造函数中注入NgZone并将其用作：

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

---

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

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