Проблема при изменении высоты в зависимости от размера экрана в 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