Angular material 如何使用x和y坐标更改angular 4材质中mat菜单的绝对位置？

我有下面的菜单

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

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

编辑： 我已经改变了菜单的位置

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是鼠标点击事件，它给出用户文本选择的坐标（X，Y）

但是，当我滚动页面时，打开的菜单会再次回到原来的位置。

---

我如何保持菜单在滚动条上的更改位置？

我已经实现了打开菜单，用户可以在其中选择文本

我添加了隐藏按钮，点击打开菜单。 在选择用户文本时，我已将该按钮的

style=“display:none；”“

更改为

style=“display:””

，显示该按钮后，我已将该按钮的位置更改为用户通过x和y坐标选择文本的位置，然后通过

this.menuTrigger.openMenu（）以编程方式打开菜单


菜单示例.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';
  }

}

导出类菜单示例{
@ViewChild（MatMenuTrigger）
私人菜单更新：MatMenuTrigger；
addTextToOpns:Array=[“选项1”、“选项2”、“选项3”]；
selectedOption:string=“未选择任何选项”；
onTextSelection（事件：任意）：无效{
if（window.getSelection&&window.getSelection（）.toString（））{
var menu=document.getElementById（'menuBtn'）；
menu.style.display=''；
menu.style.position='绝对'；
menu.style.left=event.pageX+5+'px'；
menu.style.top=event.pageY+5+'px'；
这个.menuTrigger.openMenu（）；
}
}
onmenusclosed（）：void{
var menu=document.getElementById（'menuBtn'）；
如果（菜单）{
menu.style.display='none'；
}
}
addTextTo（selectedOpn）：无效{
this.selectedOption=selectedOpn+“selected”；
}
}

菜单示例.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>


菜单
{{opn}}

供选择的文本





所选选项：{{selectedOption}
为了让这个示例在更一般的情况下工作，我发现有必要使用“menu.style.position='fixed'（而不是“menu.style.position='absolute'）

这是因为“event.pageX”返回相对于视口的坐标。由于“position=absolute”将按钮相对于其包含的父元素进行定位，因此只有当其包含的父元素尚未嵌套在其他HTML元素中时，不可见按钮的位置才是正确的

总之，我对menu 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 = 'fixed';
      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';
  }

}

导出类菜单示例{
@ViewChild（MatMenuTrigger）
私人菜单更新：MatMenuTrigger；
addTextToOpns:Array=[“选项1”、“选项2”、“选项3”]；
selectedOption:string=“未选择任何选项”；
onTextSelection（事件：任意）：无效{
if（window.getSelection&&window.getSelection（）.toString（））{
var menu=document.getElementById（'menuBtn'）；
menu.style.display=''；
menu.style.position='fixed'；
menu.style.left=event.pageX+5+'px'；
menu.style.top=event.pageY+5+'px'；
这个.menuTrigger.openMenu（）；
}
}
onmenusclosed（）：void{
var menu=document.getElementById（'menuBtn'）；
如果（菜单）{
menu.style.display='none'；
}
}
addTextTo（selectedOpn）：无效{
this.selectedOption=selectedOpn+“selected”；
}
}
你是否也愚蠢地在这里徘徊，就像我浪费了3个小时的时间手动设置mat menu的位置，仅仅因为mat menu的触发元素在某种情况下从DOM中消失，而你不希望mat menu在那时被关闭，然后，与其在触发元素上使用
ngIf使用
hidden属性，它将节省您创建隐藏元素的大量时间，首先显示它，获取它的坐标bla bla bla，这可能会挽救一些人的生命

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 = 'fixed';
      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';
  }

}