xとyの座標を使って、角度4のマテリアルのマットメニューの絶対位置を変更するにはどうすればいいですか？

Question

ユーザーが matMenuTrigger.openMenu();

を使用して、画面上のテキストを選択したときに、私はメニュー以下の角度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> 

に私は、メニューを開いていましたが、私は、ユーザーがテキストを選択し、どこメニューを開きたいです。 ユーザー選択のX座標とY座標がありますが、どのようにメニューの位置を変更できますか？私はマット・メニューにIDを与え、それを変更しようとしている

は

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

を用いた位置だが、それは、メニューの位置を変更していません。

EDIT：

IはEVTは、ユーザテキスト選択の座標（X、Y）を与えるのmouseupイベントである

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

によってメニューの位置を変更しています。

しかし、ページをスクロールすると、開いたメニューが元の位置に戻ります。 メニューをスクロール時に変更した位置に保つにはどうすればいいですか？

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>