角度 matMenu 与触发器的宽度

Question

是否有机会根据触发该菜单的按钮指定 matMenu 的宽度？我希望 matMenu 的宽度与触发器的宽度一样。触发器处于弯曲状态，因此宽度不是常量。

<button mat-button [matMenuTriggerFor]="menu">{{currentFactory?.name}}</button>
   <mat-menu #menu="matMenu">
        <button mat-menu-item *ngFor="let factory of factories; let i = index"
              (click)="changeCurrentFactory(i)">{{factory?.name}}</button>
   </mat-menu>

Answer 1

我刚刚做完这件事。就我而言，按钮周围有一个容器。您可以引用想要获取宽度的 html 元素，然后用于ngStyle设置菜单项的宽度。

<div #elementIWantWidthOf>
 <button mat-button [matMenuTriggerFor]="menu">{{currentFactory?.name}}</button>
<div>
   <mat-menu #menu="matMenu">
    <button mat-menu-item
            [ngStyle]="{'width':getWidth(elementIWantWidthOf)}
           *ngFor="let factory of factories; let i = index"
          (click)="changeCurrentFactory(i)">{{factory?.name}}</button>
   <mat-menu>

然后在你的组件中只有一个方法getWidth：

 getWidth(element: HTMLElement) {

    return `${element.clientWidth}px`;
 }