根据窗口大小在角度 2 中使用模板答案

【问题标题】：Using template in angular 2 based on window size根据窗口大小在角度 2 中使用模板
【发布时间】：2016-07-22 17:47:14
【问题描述】：

在我的模板上，我有 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 时，我在调整窗口大小时没有得到更改。我错过了什么？

【问题讨论】：

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

标签： javascript html angular

【解决方案1】：

这可以用简单的css来设置：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：