Question

我已经做出了扩展MatTrigger Class的指令，以便在右键单击时打开Mat菜单。它功能正常，但这是我的问题。我正在打开的小部件菜单很长（整个视口都溢出）。小部件仅在方形休息区可见，所有小部件都溢出。因此，右键单击行中任意位置即可打开菜单。但是，菜单在表行的开始或当我水平滚动一点然后在小部件的末尾（附加的屏幕截图）时打开。

我想在单击鼠标的位置打开该菜单。

感谢您的帮助。谢谢

我的指令

import { Directive, Input, OnInit, ElementRef, HostListener } from '@angular/core';
import { MatMenuTrigger, MatMenuPanel } from '@angular/material';

@Directive({
    selector: '[appRightMenuClick]',
    host: {
        'aria-haspopup': 'true',
        '(click)': '_handleClick(event)',
 '(contextmenu)': 'handleContext(event) 
′
 , 
′
 (contextmenu) 
′
 : 
′
 handleContext(event)',
    }
})
export class RightMenuClickDirective extends MatMenuTrigger {
    @Input('appRightMenuClick')

    get _menuFor(): MatMenuPanel {
        return this.menu;
    }
    set _menuFor(v: MatMenuPanel) {
        this.menu = v;
    }
    _handleClick(e) {
        // left click
    }
    handleContext(e) {
        this.menu.xPosition = 'before';
        e.preventDefault(); // prevents the browsers context menu
        super._handleClick(e);

        // Some of My tries
        // const menu = document.getElementsByClassName('mat-menu-panel')[0];
        // menu.parentElement.parentElement.style.position = 'relative';
        // menu.parentElement.parentElement.style.margin = '5px';
        // menu.parentElement.parentElement.style.marginLeft = e.x + 'px';
        // menu.parentElement.parentElement.style.setProperty('left', '0', 'important');
        // console.log(e.x, menu.parentElement.parentElement);

    }

}

一些截图 Widget is long and overflow is auto

When I click without scrolling

When I scroll and open it

请任何帮助都很好

如何在单击位置打开菜单

0 个答案: