问题描述

我正在尝试实现How to open mat-menu from button click of a dynamically created open layers custom control?

因此，我想为需要动态创建的开放层自定义控件添加MAT-Menu Open。在原始问题中有一个好的答案，我无法使用，因为我没有地图创建代码的控制权。

所以我有一个带有HTML的棱角PopUpMenuComponent(app-Popup-MenuComponent)：

<div id="mat-menu-opener" [matMenuTriggerFor]="menu"></div>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

在app.Component.html中，我只有我无法控制的第三方地图组件和弹出菜单组件：

<app-map-openlayers></app-map-openlayers>
<app-popup-menu></app-popup-menu>

在app.Component.ts我要打开的自定义控件我尝试使用以下mat菜单：

  private createMenuButtonElement(): HTMLElement {
    const element = document.createElement('div');
    element.className = `ol-control button menu-opener`;
    const popUpOpener = document.getElementById('mat-menu-opener');
    if (popUpOpener !== null) {
      element.appendChild(popUpOpener);
    }
    return element;
  }

所以我将div-元素移动到自定义控件的子控件。移动起作用了，但当我单击该控件时，菜单不会打开。当我签入开发人员工具的元素选项卡时，div元素看起来正常，但mat菜单不正常。

<div class="ol-control button popup-menu-button" data-automation-id="mapBtn" title="">
  <div _ngcontent-ng-cli-universal-c213="" aria-haspopup="true" id="mat-menu-opener" class="mat-menu-trigger" ng-reflect-menu="[object Object]"></div>
</div>

页面中有MAT-Menu元素，但其中没有按钮：

<app-popup-menu _ngcontent-ng-cli-universal-c360=""></app-popup-menu>

问题是：可以这样做吗？

推荐答案

捕获MatMenuTrigger作为视图子对象，并在createMenuButtonElement函数中使用它来切换、打开或关闭菜单。

<div id="mat-menu-opener" #trig="matMenuTrigger" [matMenuTriggerFor]="menu"></div>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>
<app-map-openlayers></app-map-openlayers>

@ViewChild('trig') menuTrigger: MatMenuTrigger;

private createMenuButtonElement(): HTMLElement {
  const element = document.createElement('div');
  element.className = `ol-control button menu-opener`;
  element.addEventListener('click', () => {
    this.menuTrigger.toggleMenu();
  });
  return element;
}

这篇关于是否可以将角度组件中的html元素设置为动态创建的组件的子项，以便打开MAT-Menu？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！