Триггер Mat Mat на родительском элементе от ребенка

Question

Я бы хотел расположить всплывающее меню меню по отношению к родительскому элементу. Документация

Angular говорит о следующем положении меню:

По умолчанию меню будет отображаться ниже (ось 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>

Вот компонент виджета, о котором я говорю. Неоткрытый компонент (зависание)

Вот что происходит, когда вы нажимаете matMenuTrigger для этого меню триггеров. обратите внимание, что это перекрывает родительский div. Срабатывает с кнопки

Это то, что я хочу. Меню всплывает относительно родительского элемента. Обратите внимание, что он не перекрывает div, потому что я поместил matMenuTriggerFor на родительский элемент gridster.

Вызывается из 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>

Answer 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>