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


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

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

1
2
    <button type="button" class=""><span>Popover</span></button>
</app-button>

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

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

1
    </app-popover>

app按钮具有"显示：行内块；位置：相对；" 样式，就像普通的html按钮一样。

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

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

Material CDK添加了"顶部"和"左侧"样式，如下所示：

1
    </app-popover>

具有样式" display：inline-block"的简单div也可以工作。

为什么Angular组件(样式为"显示：行内块；位置：相对；")不起作用，如何使它起作用？

通过在组件中添加" .elementRef"来解决该问题：

1
2
    <button type="button" class=""><span>Popover</span></button>
</app-button>

从这里的Angular Material CDK源代码

1
2
3
4
5
/** 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：数字;})。

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