是否可以将 Angular 组件中的 html 元素设置为动态创建的组件的子元素，以便它打开 mat-menu？

Question

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

中描述的情况

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

所以我有一个 angular PopUpMenuComponent (app-popup-menu) HTML:

<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中我只有我无法控制的第3方地图组件和弹出菜单组件:

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

在 app.component.ts 我想打开垫子菜单的自定义控件中，我尝试以下操作：

  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 元素移动到自定义控件的子元素。移动有效，但当我单击控件时菜单未打开。当我检查开发人员工具 Element-tab 时，div-element 看起来不错，但 mat-menu 没有。

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

问题是：这样可以吗？

Answer 1

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

是否可以将 Angular 组件中的 html 元素设置为动态创建的组件的子元素，以便它打开 mat-menu？

Is it possible to set html element in an Angular component as child of dynamically created component so that it opens mat-menu?

javascript

html

angular

openlayers