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

Question

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

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

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

Answer 1

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

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