Javascript 如何在typescript文件中写入媒体查询？

我需要更改ts文件中的媒体查询，因为如果宽度<580px=true，我的变量visible showSideBar会显示。 我需要的解决方案是如何知道在ts文件时，是分辨率低于580px设置变量为真

TS.file

  showSideBar = false;

SCSS. file

.aside-bar {
   @media(max-width: 580px) {
     ....any value
  }
}

---

我将使用角度cdk布局观察者来获得一个可观察的

---

您可以在纯js中使用类似的内容。

您可以在示例中使用.matches来设置值

函数多切克（查询）{
if（query.matches）{//if媒体查询匹配
document.querySelector（'.aside bar'）。innerHTML='red'
}否则{
document.querySelector（'.aside bar'）。innerHTML='blue'
}
}
const query=window.matchMedia（“（最大宽度：400px）”）
doCheck（query）//在运行时调用侦听器函数
query.addListener（doCheck）//在状态更改时附加侦听器函数

。侧边栏{
宽度：100px；
高度：100px；
颜色：白色；
背景：蓝色；
}
@介质（最大宽度：400px）{
.吧台{
背景：红色；
}
}

---

侧栏

我已经在使用库进行材料设计，它不是角材料，因为我希望没有a.material。这应该是公认的答案，因为“matchmedia”是最接近回答问题的功能。还应该注意的是，它比调整大小的侦听器要强大得多。谢谢

@Component({...})
class MyComponent {
  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.HandsetLandscape,
      Breakpoints.HandsetPortrait
    ]).subscribe(result => {
      if (result.matches) {
        this.activateHandsetLayout();
      }
    });
  }
}

@Component({...})
class MyComponent {
  constructor(mediaMatcher: MediaMatcher) {
    const mediaQueryList = mediaMatcher.matchMedia('(min-width: 1px)');
  }
}