如何强制 Angular 材质垫菜单从屏幕一角开始答案

【问题标题】：How to force Angular material mat menu to start at the corner of the screen如何强制 Angular 材质垫菜单从屏幕一角开始
【发布时间】：2020-08-18 14:12:32
【问题描述】：

Angular Material 菜单 API 允许我们使用覆盖触发器（按钮）的 overlapTrigger 来调整框的位置，还可以使用 xPosition 和 yPosition 来相对于触发器（按钮）移动它例如（'above'、'before' 等），但我找不到将菜单粘贴到屏幕角落的方法。

这里有一个 stackblitz 带有垫子菜单。当我点击菜单按钮图标时，我需要菜单显示在屏幕的角落，左侧或右侧。

谢谢！

【问题讨论】：

我们需要其他信息以满足您的需要。是哪个角落？如果它在左上角，这是否意味着您希望叠加层位于显示它的按钮上方？
这是您要查找的内容：<mat-menu #menu="matMenu" [overlapTrigger]="true">?

标签： angular angular-material

【解决方案1】：

您可以使用绝对值或使用其选项。也许这对你有帮助：

::ng-deep.cdk-overlay-pane{
  transform: translate(80px, 70px);
}

选择最适合您的值。

【讨论】：

非常感谢！！ kyour 解决方案确实对我有用。我在 mat-menu 上使用 [overlapTrigger]="true 并使用您的解决方案 ::ng-deep.cdk-overlay-pane { transorm: translate(-8px, -16px) }

【解决方案2】：

材质菜单元素使用.cdk-overlay-connected-position-bounding-box 类来显示覆盖，您的垫子菜单将从这里开始。所以在你的styles.css中添加这个以将你的mat-menu设置在左上角

.cdk-overlay-connected-position-bounding-box{
  top:0 !important;
  left:0 !important;
}

【讨论】：

谢谢@Alexis，我试过你的解决方案，还是不行，我还加了position: absolute和z-index: 2000，顺便说一句，不推荐使用!important，因为它会影响其他部分的应用程序，我仍然需要一个更好的解决方案。
@user12163165 不，如果你像这样使用组件名称作为前缀，它不会泄漏到其他 CSS 中：:host your-component-name .cdk-overlay-connected-position-bounding-box { css }