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() 方法，该方法应在按钮旁边显示弹出窗口（工具提示）。

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

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

app-button 有 "display: inline-block; position: relative;" 风格，就像一个普通的 html 按钮。

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

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

and Material CDK 添加了 "top" and "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 MaterialCDK源代码here

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

所以传递给AngularCDK Overlay服务的参数'origin'必须是"ElementRef | HTMLElement"类型（或Point，即{readonly x: number; readonly y: number ; }).

我把这个留在这里，希望这对以后的人有帮助。

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

Material CDK Overlay flexibleConnectedTo doesn't accept Angular component as origin

overlay

angular-material

angular

angular-cdk