且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

滚动页面时在上方打开角度材质的工具提示,并避免工具提示被隐藏

更新时间:2023-10-30 21:10:58

要解决此问题,您需要将cdk版本升级到7.3.7,该版本在OverlayRef上有一个新方法,称为updatePositionStrategy.

To fix this, you need to upgrade your cdk version to 7.3.7 which has a new method on OverlayRef as updatePositionStrategy.

根据此方法,您可以在粘贴后更改叠加层的位置策略.

According to this method you can change the position strategy of an overlay after attach.

在附加组件之后,您需要在show功能中更新位置策略,如下所示:

In your show function after attaching the component you need to update position strategy as below:

this._overlayRef.updatePositionStrategy(this._overlayPositionBuilder
  .flexibleConnectedTo(this._elementRef)
  .withPositions([{
    originX: "center",
    originY: "bottom",
    overlayX: "center",
    overlayY: "top",
    offsetY: this.getOffsetY()
  }]));
this._overlayRef.updatePosition();

其中this.getOffsetY()是私有方法,根据元素当前位置提供偏移y值.您可能需要更新此逻辑.

where this.getOffsetY() is private method provide offset y value based on element current position. You may need to update this logic.

private getOffsetY() {
  if (this._elementRef.nativeElement.getBoundingClientRect().bottom > 500)
    return -400;
  if (this._elementRef.nativeElement.getBoundingClientRect().bottom > 400)
    return -300;
  if (this._elementRef.nativeElement.getBoundingClientRect().bottom > 300)
    return -200;
  return -10;
}

这是stackblitz 链接

Here is stackblitz link