javascript - 根据窗口大小在 Angular 2 中使用模板

Question

在我的模板上，我有 2 个 div。一种用于表格 View (笔记本电脑)，一种用于 ListView (移动设备 View )。

在我的 .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;
    }