Question

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

Answer 1

可以使用简单的css设置：

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

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

Answer 2

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

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

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

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

2 个答案: