组件中获取的HTML元素的坐标错误

Question

我已在gridster项目内的SVG图表中添加了自定义工具提示（所有示例均在stackblitz上提供）。使用nativeElement获取工具提示（div）坐标，并使用Renderer2进行设置（trivial example-工具提示div偏移20px）。但是，当我将图表窗口小部件投影到gridster项中时，工具提示总是添加到错误的位置（请参阅the full example-将鼠标悬停在圆圈上）。似乎对于每个小部件，div的坐标都会增加，该小部件距离窗口边缘（左侧和顶部）的距离要远多少。

从视觉上看，这是工具提示应该远离圆的距离：

但是实际上（元素离屏幕边缘的距离越远，工具提示的放置位置就越远）：

我尝试查看<ng-content>是否存在问题，即GridsterItem中的内容投影，但是当我制作一个自定义组件来模仿时，我似乎不喜欢（请参见this example）。为什么网格器项目中的坐标时髦？是renderer相对于小部件还是document的设置坐标？

Answer 1

问题是您根据圆的客户位置设置了工具提示位置。您需要的是圆相对于其父级的位置。

 <View style={{ width: 200, marginTop: -15, justifyContent: 'flex-start',}}>
 <Dropdown
  label=''
  value="Pure Austin Fitness"
  data={this.state.userTypes.sampleState}
  baseColor="#fff"
  textColor="#fff"
  itemColor="#000"
  selectedItemColor="#000"
  fontSize={18}
  dropdownPosition={0}
 />
 </View>

有关演示，请参见this stackblitz。