html - Angular - 使用 NgStyle 动态更改 CSS 属性

Question

我有div我想要显示或不显示的元素取决于屏幕尺寸(我知道这可以通过媒体查询来完成，但尝试用 Angular 来解决这个问题)。所以我得到了 NgStyle 条件 [ngStyle]="{display: innerWidth < '600' ? 'none' : 'flex'}"当innerWidth在此组件的 .ts 文件中是变量

public innerWidth: any;
  ngOnInit() {
    this.innerWidth = window.innerWidth;
  }

这工作正常，但仅在重新加载页面时才会更改，因此我想在调整浏览器窗口大小时动态触发此更改，是否可以以类似的方式实现？

Answer 1

调整窗口大小时，您需要更新该值。您可以监听 window:resize:

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = event.target.innerWidth;
}