如何使用x和y坐标改变角度4材质中mat-menu的绝对位置？

Question

我在角4中有以下菜单

<button mat-button [matMenuTriggerFor]="menu" style="display:none;">Menu</button>
    <mat-menu #menu="matMenu">
        <button mat-menu-item *ngFor="let item of items" (click)="select(item)">
            {{ item }}
        </button>
    </mat-menu>

当用户使用屏幕选择文本时,我打开菜单 matMenuTrigger.openMenu();

但是我希望在用户选择文本的地方打开菜单.我有用户选择的X和Y坐标,但如何更改菜单的位置？

我已尝试将Id添加到mat-menu并使用更改它的位置

element.style.position = 'absolute'
element.style.left = screenX + 'px'
element.style.top = screenY + 'px'

但它并没有改变菜单的位置.

编辑: 我改变了菜单的位置

this.matMenuTrigger.openMenu();
var element = document.getElementsByClassName('cdk-overlay-pane');
menu.style.position = "absolute";
menu.style.left = evt.pageX + 5 + 'px';
menu.style.top = evt.pageY + 5 + 'px';

其中evt是mouseup事件,它给出了用户文本选择的坐标(X,Y).

但是,当我滚动页面时,打开的菜单再次回到原来的位置.如何保持菜单在滚动时改变位置？

Answer 1

我已经实现了开放式菜单,用户可以选择文本.

我添加了隐藏按钮,点击打开菜单.在用户文本选择上,我已style="display:none;"将该按钮更改为style="display:'';"显示该按钮后,我已将该按钮的位置更改为用户通过x和y坐标选择文本的位置,然后以编程方式打开菜单this.menuTrigger.openMenu();

DEMO

菜单example.ts

export class MenuIconsExample {
@ViewChild(MatMenuTrigger)
    private menuTrigger: MatMenuTrigger;

  addTextToOpns: Array<String> = ["option 1", "option 2", "option 3"];
  selectedOption: string = "no Option selected";
  onTextSelection(event: any):void{
    if(window.getSelection && window.getSelection().toString()){
      var menu = document.getElementById('menuBtn');
      menu.style.display = '';
      menu.style.position = 'absolute';
      menu.style.left = event.pageX + 5 + 'px';
      menu.style.top = event.pageY + 5 + 'px';

      this.menuTrigger.openMenu();  
    }

  }

  onMenuClosed():void {
    var menu = document.getElementById('menuBtn');
        if (menu) {
            menu.style.display = 'none';            
        }
  }

  addTextTo(selectedOpn): void {
    this.selectedOption = selectedOpn + ' selected';
  }

}

菜单example.html的

<div (mouseup)="onTextSelection($event)">
  <button mat-button [matMenuTriggerFor]="menu" id="menuBtn" style="display:none;">Menu</button>
    <mat-menu #menu="matMenu" (close)="onMenuClosed()">
        <button class="menuOpnBtn" mat-menu-item *ngFor="let opn of addTextToOpns" (click)="addTextTo(opn)">
            {{ opn }}
        </button>
    </mat-menu>
  <p>
    text for selection
  </p>
</div>
<br/>
<br/>


<div><span>selected option : </span> <span>{{selectedOption}}</span></div>