html - 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; 
}

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

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

DOMRect {x: 0, y: 0, width: 0, height: 0, top: 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
   }
}