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添加了“顶部”和“左侧”样式，如下所示：

<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组件（显示样式为“显示：行内块；位置：相对；”）不起作用，如何使它起作用？

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，即{只读x：数字；只读y：数字;}）。

我把它留在这里，希望以后能对某人有所帮助。

材质CDK叠加flexibleConnectedTo不接受Angular组件作为原点

1 个答案: