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

Question

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

'..更多的'

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

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

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

我看到CdkVirtualScrollViewport.nativeElement.getBoundingClientRect()返回

DOMRect {x: 0, y: 0, 宽度: 0, 高度: 0, 顶部: 0, …}

当display:content时。

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

Answer 1

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

例如：

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