Angular material 将cdk覆盖定位在鼠标位置

我尝试定位覆盖，右上角位于鼠标位置。为了让它形象化，我将向您展示一个图形，它应该是什么样子以及我得到了什么

因此，要在鼠标右上角定位覆盖，必须从event.clientX值中减去覆盖的宽度（见下文）。但是总宽度必须是动态的，这取决于覆盖内容的宽度。随着时间的推移，这可能会有所不同。那么，如何获得覆盖宽度的精确值，并在之后对其进行定位呢

打开覆盖图的按钮：

<button (click)="showTasks($event)"></button>

覆盖服务：

@Injectable()
export class ServerTaskOverlayService {

  private _config = new OverlayConfig({});

  constructor(private overlay: Overlay) {}

  open(comp:ComponentType<any>,event:MouseEvent) {
    // Here the width of the overlay should already be known
    this._config.positionStrategy = this.overlay.position().global().left(event.clientX+"px").top(event.clientY+"px");

    const overlayRef = this.overlay.create(this._config);

    const filePreviewPortal = new ComponentPortal(comp);

    overlayRef.attach(filePreviewPortal);
  }
}

@Injectable（）
导出类ServerTaskOverlyService{
private _config=newoverlyconfig（{}）；
构造函数（私有覆盖：覆盖）{}
打开（组件：组件类型，事件：MouseEvent）{
//这里应该已经知道覆盖层的宽度
this._config.positionStrategy=this.overlay.position（）.global（）.left（event.clientX+“px”）.top（event.clientY+“px”）；
const overlayRef=this.overlay.create（this.\u config）；
const filePreviewPortal=新组件门户（comp）；
overlayRef.attach（filePreviewPortal）；
}
}

尝试使用PositionStrategy创建覆盖，然后更改

left

值。 例如：

this.overlayRef = this.overlay.create({
  positionStrategy: this.positionStrategy
});

this.overlayRef.attach(new TemplatePortal(this.templateRef, this.viewContainerRef));

this.positionStrategy.left(`${event.clientX - element width}px`);
this.positionStrategy.apply();

---

尝试使用PositionStrategy创建覆盖，然后更改

left

值。 例如：

this.overlayRef = this.overlay.create({
  positionStrategy: this.positionStrategy
});

this.overlayRef.attach(new TemplatePortal(this.templateRef, this.viewContainerRef));

this.positionStrategy.left(`${event.clientX - element width}px`);
this.positionStrategy.apply();