javascript - 动态更改元素的高度 - Angular 5

Question

我有 2 个连接的 div 元素，在左边我有图像列表，在右边我有每个图像的详细信息。我在点击图片时打开了右边的 div，它有绝对位置，但后来我遇到了问题。

我需要计算这 2 个 div 的高度，所以我总是有相同的高度 - 每次我点击一些东西，改变一些东西......(我只能在左边的 div 中有一个图像，它有很多信息所以右边的 div 的高度更大，或者我可以在左边有 100 张图片所以左边的高度更大)。这是我尝试过的方法，但效果不够好:

leftHeight: number;
rightHeight: number;

ngDoCheck() {
    if (window.innerWidth < 1336 && this.openDetails) {
      this.chRef.detectChanges();
      if (this.leftElement.nativeElement.clientHeight > this.rightElement.nativeElement.clientHeight) {
        this.rightHeight = this.leftElement.nativeElement.clientHeight;
      } else {
        this.leftHeight = this.rightElement.nativeElement.clientHeight;
      }
      this.chRef.detectChanges();

    }
  }

HTML:

<div class="wrapper">

 <div class="left-part" #leftElement [style.height.px]="leftHeight - 40">
  <!-- some ngFor is here with images -->
 </div>

 <div [@focusPanel]='smallScreen' *ngIf="openDetails" #rightElement class="right-part" [style.height.px]="rightHeight - 65">
<!-- some details of each image -->
 </div>
</div>

有什么建议可以尝试，还有什么可以做吗？

编辑:这个半成品，我在开始时设置元素的高度，但它不会改变它之后的高度，不会再次计算

Answer 1

我不确定这是否有帮助，但您是否尝试在 ngAfterViewChecked 事件中调用函数 ngDoCheck？
应该是这样的:

 export class YourComponent implements AfterViewChecked {

    constructor(private cdRef:ChangeDetectorRef) {}

    ngAfterViewChecked() {
       this.ngDoCheck();
    }