如何防止 mat-menu 与触发器重叠？

Question

我正在尝试将 mat-menu 与不在视口最顶部但在下方约 100 像素处的触发器一起使用。我已经为它做了一个可复制的例子。

示例链接：https://stackblitz.com/edit/angular-eqgwro?file=src/app/menu-icons-example.html

只要菜单内容很小，一切都会按预期进行：

但是当内容长到需要滚动时，触发重叠：

如何防止这种重叠？它是角材料中的错误吗？我试过[overlapTrigger]="false" [yPosition]="'below'"，但并没有解决问题

Answer 1

您可以将 CSS 类添加到 mat-menu

<mat-menu #modulesMenu="matMenu" class="some-class-name">

然后使用::ng-deep（即使他们说它已被弃用）设置max-height

::ng-deep .some-class-name {
  max-height: 300px;
}

注意 1：::ng-deep .some-class-name 应该在 :host 之外，以防你使用它。

注意2：关于::ng-deep的弃用状态，有几个讨论，不会很快删除。