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`;
 }

带有触发宽度的角度matMenu

1 个答案: