如何通过单击动态创建的打开图层自定义控件的按钮打开 mat-menu? [英] How to open mat-menu from button click of a dynamically created open layers custom control?

问题描述

我在具有开放图层地图的 app.component 中创建了开放图层自定义控件/按钮来打开图层地图.

 private createMenuOpener(): HTMLElement {const element = document.createElement('div');element.className = `ol-control button menu-opener`;//为其他按钮设置点击处理程序//但是 mat-menu 是用 [matMenuTriggerFor] 打开的element.addEventListener('click', () => {//如果设置了，需要打开mat-menu});返回元素；}

app.component 的 HTML 只包含第 3 方地图组件:

mat-menu 可以在单独的组件或 app.component 的模板中定义.

可能的解决方案:

1. 在不使用 matMenuTriggerFor 的情况下打开 mat-menu.
2. 为使用 document.createElement 创建的原生元素设置 matMenuTriggerFor.

解决方案

EDIT(基于评论中的说明)

您需要将 MatMenuTrigger 的引用传递给自定义 OpenLayers 控件的构造函数，然后在点击处理程序中对其调用 openMenu().

如果您无法访问地图创​​建代码(new Map...)，这可能会很困难，但如果您可以访问它，则相对简单.>

我准备了一个StackBlitz 证明了这一点.它是您链接的自定义控件示例的修改副本，但这次它还会打开一个 Angular 材质菜单.

上一个答案

通常，在 Angular 中，您不会使用 document 在组件模板中创建元素.

相反，使用一个变量来指示按钮是否存在，并在模板中使用 ngIf 来包含它:

private createMenuOpener(): void {this.showButton = true;}

打开

I create open layer custom controls / buttons to open-layers map like this in app.component that has open-layers map.

  private createMenuOpener(): HTMLElement {
    const element = document.createElement('div');
    element.className = `ol-control button menu-opener`;
    
    // for other buttons the click handler is set
    // but mat-menu is opened with [matMenuTriggerFor] 
    element.addEventListener('click', () => {
       
       // if this is set, it needs to open mat-menu

    });
    return element;
  }

HTML for app.component just contains the 3rd party map component :

<app-map-openlayers></app-map-openlayers>

The mat-menu could be defined in a separate component or in app.component's template.

Possible solutions:

1. Open mat-menu without using matMenuTriggerFor.
2. Set matMenuTriggerFor for the native element created with document.createElement.

解决方案

EDIT (based on clarification in comments)

You need to pass a reference to MatMenuTrigger to the constructor of the custom OpenLayers control, and then call openMenu() on it in the click handler.

This can be difficult if you don't have access to the map creation code (new Map...), but if you do have access to it, then it's relatively straightforward.

I've prepared a StackBlitz that demonstrates this. It's a modified copy of the custom control example you linked, but this time it also opens an Angular material menu.

Previous Answer

In general, in Angular you don't create elements in your component templates by using document.

Instead, have a variable which indicates whether the button exists, and use an ngIf in your template to include it:

private createMenuOpener(): void {
   this.showButton = true;
}

<button *ngIf="showButton" 
        class="ol-control button menu-opener" 
        [matMenuTriggerFor]="...">
  Open
</button>

这篇关于如何通过单击动态创建的打开图层自定义控件的按钮打开 mat-menu?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！