我有 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>
有什么建议可以尝试,还有什么可以做吗?
编辑:这个半成品,我在开始时设置元素的高度,但它不会改变它之后的高度,不会再次计算
最佳答案
我不确定这是否有帮助,但您是否尝试在 ngAfterViewChecked 事件中调用函数 ngDoCheck?
应该是这样的:
export class YourComponent implements AfterViewChecked {
constructor(private cdRef:ChangeDetectorRef) {}
ngAfterViewChecked() {
this.ngDoCheck();
}
关于javascript - 动态更改元素的高度 - Angular 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48540312/