Question

我有两个连接的div元素，左边有一个我有图像列表，右边一个我有每个图像的细节。我点击图像打开右边的div，它有绝对位置，但后来我遇到了问题。

我需要计算那两个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();
    }

Answer 2

您可以在右侧div上设置滚动条。只需添加到css：

.scrollBarClass {
  max-height: 500px;
  overflow-y: scroll;
}

然后在你的右边div添加：

<div class="scrollBarClass"> </div>

编辑回答：

如果你已经设定了两个div的高度，那么只需设置

即可

<div class="scrollBarClass"> </div>

两个div上的

，如果它们变得太大，你就会滚动。

动态改变元素的高度 - Angular 5

2 个答案: