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;
}