Material CDK Overlay flexibleConnectedTo 不接受 Angular 组件作为原点

Question

我有一个 Angular 组件，它实际上是引擎盖下的一个按钮：

<app-button (click)="showText(thebutton)" #thebutton>
    <button type="button" class=""><span>Popover</span></button>
</app-button>

showText() 方法调用 PopoverService.open() 方法，该方法应在按钮旁边显示一个弹出框（工具提示）。

问题是，弹出框出现在浏览器窗口的左上角，而不是元素旁边。

<div id="cdk-overlay-0" class="cdk-overlay-pane" style="pointer-events: auto;">
    <app-popover>
        <div class="popover"></div>
    </app-popover>
</div>

应用按钮有一个“显示：内联块；位置：相对；”样式，就像一个普通的html按钮。

当我将代码更改为普通的 HTML 按钮时，它按预期工作：

<button (click)="showText(thebutton)" #thebutton>Popover</button>

Material CDK 添加了“top”和“left”样式，如下所示：

<div id="cdk-overlay-2" class="cdk-overlay-pane" style="pointer-events: auto; top: 87px; left: 389.656px;">
    <app-popover>
        <div class="popover"></div>
    </app-popover>
</div>

样式为“display: inline-block”的简单 div 也可以。

为什么 Angular 组件（样式为“display: inline-block; position: relative;”）不能工作，我怎样才能让它工作？

Answer 1

通过将“.elementRef”添加到组件来解决它：

<app-button (click)="showText(thebutton.elementRef)" #thebutton>
    <button type="button" class=""><span>Popover</span></button>
</app-button>

来自 Angular Material CDK 源代码here

/** Possible values that can be set as the origin of a FlexibleConnectedPositionStrategy. */
export type FlexibleConnectedPositionStrategyOrigin = ElementRef | HTMLElement | Point & {
  width?: number;
  height?: number;
};

因此，传递给 Angular CDK Overlay 服务的参数“origin”必须是“ElementRef | HTMLElement”类型（或 Point，即 { readonly x: number; readonly y: number; }）。

我把这个留在这里，希望这对将来的人有所帮助。