中心Mat-Menu，中心MatMenu与按钮叠加

Question

每个Material Issue 9631将mat-menu置于按钮的中心如下。

  

问题在于，支持它会偏离规范，并可能看起来很奇怪。

---

我需要此功能...因为编写我自己的CDK覆盖比重写mat-menu组件要耗费更多时间...我对重新创建mat-menu并不感兴趣，并且只需要将菜单居中即可...我也对其他任何图书馆都不感兴趣，我想使用Material mat-menu，所以我的问题如下。

问题：

如何使用角度directive覆盖MatMenuTrigger的私有变量和方法，以将CDK叠加层居中放置在按钮上？

Answer 1

我之所以选择指令，是因为MatMenuTrigger是Directive，因此可以复制Material来源使用的逻辑。

到目前为止，这是我想出的方法，我不确定进入这样的课堂本身是否“可以接受”，或者不确定是否有这样做的负面影响。

  

对于任何建议或改进，我愿意就此方法进行建设性讨论。

---

Stackblitz

https://stackblitz.com/edit/angular-jpgjdc-nqmyht?embed=1&file=app/center-matmenu.directive.ts

本质上，我是通过将matMenuTrigger与按钮解耦，方法是将其放在包裹div的{​​{1}}上……这是为了可以从指令中以编程方式打开菜单，而不是按钮。

• 我还将mat-menu分配给menuTrigger上的templateRef，并将其作为输入传递给我的div选择器

center-mat-menu

从那里我通过<button mat-button [center-mat-menu]="menuTrigger">Menu</button> <div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu"> <mat-menu #menu="matMenu">

创建一个侦听器

@HostListener

然后复制@HostListener('click', ['$event']) 指令的逻辑来操纵放置位置，初始化菜单并在单击时触发打开的动画。

这基本上是MatMenuTrigger源中openMenu()方法的复制，除了在初始化菜单之后，在我调用menu-trigger.ts打开之前要操纵左右样式菜单。

menu-trigger.ts

  

我将源按钮的尺寸存储到变量中   使用该信息来计算按钮的中心点，然后将其与   初始化菜单的宽度以计算this.menuTrigger.menu['_startAnimation']();

left