子元素的父元素上的 Mat 菜单触发器答案

【问题标题】：Mat Menu Trigger on Parent Element from Child子元素的父元素上的 Mat 菜单触发器
【发布时间】：2020-05-07 23:10:28
【问题描述】：

我想相对于父元素定位一个 mat 菜单弹出窗口。

Angular 的文档中关于 mat 菜单位置的内容如下：

默认情况下，菜单将显示在（y轴）下方，（x轴）之后，不重叠其触发器

这很好，但它与触发器 (matMenuTriggerFor) 相关。

我希望菜单相对于父元素打开。单击 div 内的按钮，mat men 显示而不重叠它的相对元素。

    <gridster-item [item]="w" [class.editing]="w.editing">
      <div class="primary-header widget-settings-bar" color="primary" *ngIf="showSettingsBar == true">
        <div class="widget-settings-button contrast-color">
          <mat-icon class="icon" aria-hidden="false" aria-label="Delete" [matMenuTriggerFor]="appMenu">settings
          </mat-icon>
        </div>
        <div class="widget-settings-button contrast-color">
          <mat-icon class="icon" aria-hidden="false" aria-label="Duplicate" (click)="duplicateDashboardWidget(w)">
            control_point_duplicate</mat-icon>
        </div>
        <div class="widget-settings-button contrast-color">
          <mat-icon class="icon" aria-hidden="false" aria-label="Delete" (click)="deleteDashboardWidget(w)">delete
          </mat-icon>
        </div>
      </div>
      <div class="grid-widget mat-card2">
        <ndc-dynamic [ndcDynamicComponent]=components[w.component] [ndcDynamicInputs]="w"></ndc-dynamic>
      </div>
    </gridster-item>

这是我正在谈论的小部件组件。 Unopened Component (hovering)

这是当您单击触发菜单的 matMenuTriggerFor 时发生的情况。请注意它与父 div 重叠。 Triggered from button

这就是我想要的。菜单相对于父元素弹出。请注意，它没有与 div 重叠，因为我将 matMenuTriggerFor 放在 gridster-item 父级上。

Triggered from div

问题是我无法弄清楚如何在没有 matMenuTriggerFor 的情况下打开此菜单，并且我不希望在单击父 div 时打开菜单。我只想在单击小齿轮按钮时打开菜单。

<gridster-item [item]="w" [class.editing]="w.editing" [matMenuTriggerFor]="appMenu">
  <div class="primary-header widget-settings-bar" color="primary" *ngIf="showSettingsBar == true">
    <div class="widget-settings-button contrast-color">
      <mat-icon class="icon" aria-hidden="false" aria-label="Delete">settings
      </mat-icon>
    </div>
    <div class="widget-settings-button contrast-color">
      <mat-icon class="icon" aria-hidden="false" aria-label="Duplicate" (click)="duplicateDashboardWidget(w)">
        control_point_duplicate</mat-icon>
    </div>
    <div class="widget-settings-button contrast-color">
      <mat-icon class="icon" aria-hidden="false" aria-label="Delete" (click)="deleteDashboardWidget(w)">delete
      </mat-icon>
    </div>
  </div>
  <div class="grid-widget mat-card2">
    <ndc-dynamic [ndcDynamicComponent]=components[w.component] [ndcDynamicInputs]="w"></ndc-dynamic>
  </div>
</gridster-item>

【问题讨论】：

标签： angular angular-material material-design

【解决方案1】：

使用 ViewChildren 获取对所有 matMenuTriggers 的引用。

@ViewChildren('menuTrigger') matMenuTriggers: QueryList<MatMenuTrigger>;

然后在页面加载后迭代并禁用_handleClick

  public ngAfterViewInit() {
    this.matMenuTriggers.changes.subscribe((matMenuTriggers) => {
      matMenuTriggers.toArray().forEach((matMenuTrigger) => matMenuTrigger._handleClick = () => {});
    });
  }

您仍然可以通过编程方式调用openMenu 从其他地方打开和关闭菜单。它将与父 div 相关联，避免重叠。

        <div class="widget-settings-button contrast-color" (click)="menuTrigger.openMenu()">
          <mat-icon class="icon" aria-hidden="false" aria-label="Delete">settings
          </mat-icon>
        </div>

【讨论】：