我想根据使用angular调整窗口的大小来动态更改父div和子div的高度

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {

  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    // 在窗口大小变化时触发的方法
    this.adjustDivHeight();
  }

  adjustDivHeight() {
    // 在这里根据窗口大小调整父div和子div的高度
    // 可以使用JavaScript或CSS来实现高度的调整
  }

}

adjustDivHeight() {
  const windowHeight = window.innerHeight; // 获取窗口的高度
  const parentDiv = document.getElementById('parentDiv'); // 获取父div的元素
  const childDiv = document.getElementById('childDiv'); // 获取子div的元素

  // 设置父div和子div的高度为窗口高度的一半
  parentDiv.style.height = windowHeight / 2 + 'px';
  childDiv.style.height = windowHeight / 2 + 'px';
}

<div id="parentDiv">
  <!-- 父div的内容 -->
  <div id="childDiv">
    <!-- 子div的内容 -->
  </div>
</div>