Angular cdk-virtual-scroll-viewport 在调用 getBoundingClientRect 时返回 0答案

【问题标题】：Angular cdk-virtual-scroll-viewport return 0 when calling getBoundingClientRectAngular cdk-virtual-scroll-viewport 在调用 getBoundingClientRect 时返回 0
【发布时间】：2021-09-29 21:44:44
【问题描述】：

我有一个包含在 cdk-virtual-scroll-viewport 中的表格组件。其中一个列单元格包含

'..更多'

扩展整行的选项。但是当向上/向下滚动时，由于滚动视口的性质（用户希望它保持展开），该行会折叠。我通过添加display: contents 解决了这个问题。

cdk-virtual-scroll-viewport {
  height: 100%;
  min-height: 200px;
  display: contents; 
}

但这改变了弹出组件在表格内的定位（顶部，左侧排列），因为我们将CdkVirtualScrollViewport 作为@INPUT 传递给弹出组件以计算位置（顶部、底部、左侧、右侧）显示弹出窗口

我看到CdkVirtualScrollViewport.nativeElement.getBoundingClientRect()回来了

DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, ...}

当display:content 被设置时。

谁能告诉我为什么它返回“0”

【问题讨论】：

标签： html css angular angular-cdk-virtual-scroll

【解决方案1】：

如果您使用@Input，则在初始化 (ngOnInit) 之前，该值不会传递给组件。您可以改用生命周期 ngOnChanges，以便在组件初始化之前传递值。

例如：

ngOnChanges(changes: SimpleChanges) {
if (changes.inputName && changes.inputName.previousValue !== changes.inputName.currentValue) {
...use renderer to set your styles
   }
}

【讨论】：