根據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和bootstrap 4。

如何在頁面加載時獲取屏幕尺寸的值。請幫助我解決此問題

Answer 1

您是否嘗試過window.screen.height和window.screen.width

要獲取文檔客戶端的寬度和高度，請選擇document.documentElement.clientWidth和document.documentElement.clientHeight