时间戳

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

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

问题描述

我正在尝试实现如何通过单击动态创建的打开层自定义控件的按钮打开 mat-menu 中描述的情况？

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

所以我有一个带有 HTML 的 Angular PopUpMenuComponent (app-popup-menu)：

<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 中，我想打开 mat-menu 的自定义控件，我尝试以下操作：

  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>

问题是：这可以这样做吗？

标签： javascripthtmlangularopenlayers

解决方案

将其捕获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;
}

推荐阅读