根据angular6中的屏幕尺寸更改高度时面临的问题

Question

我正在使用 HostListener 来根据屏幕大小更改高度，但在加载页面期间，“event.target.innerHeight”稍后给出未定义我将在更改浏览器高度时获得该值，所以我已经初始化了值。最初，如果用户在大屏幕上浏览，该值不会改变

 Here is the code

  myInnerHeight = 524;         //Laptop screen
  mypaletteHeight = 471;       //Laptop screen

@HostListener('window:resize', ['$event'])
  onResize(event) {
    if (event.target.innerHeight > 680) {
     this.myInnerHeight = 727;     //bigger screen
     this.mypaletteHeight = 674;    //bigger screen
    } else {
      this.myInnerHeight = 524;      //Laptop screen
      this.mypaletteHeight = 471;    //Laptop screen
    }
  }

HTML

<div class="card h-100" [style.min-height.px]="myInnerHeight" >
....
     <div class="sub2" id="sub2" [style.height.px] = "mypaletteHeight">
     .
     .
      </div>
</div>

我正在使用 Angular 6 和引导程序 4。

如何在页面加载时获取屏幕尺寸的值。请帮我解决这个问题

Answer 1

你试过 window.screen.height & window.screen.width

获取文档客户端宽度&高度，document.documentElement.clientWidth & document.documentElement.clientHeight