Question

当用户右键单击警报列表中的项目时，我正在尝试显示上下文菜单。问题是我需要使用指令msgbox才能从组件中调用mdMenuTriggerFor。但是该指令适用于左键单击，因此始终显示菜单（左键和右键单击）。此外，右键单击，菜单显示在列表顶部。

我的代码如下所示：

openMenu()

我的组件打字稿文件如下所示：

<div class="list">
    <div *ngFor="let alarm of (_alarms | alarmsFilter:search.value)">
        <alarm-item [alarm]="alarm" (onClick)="onSelection(alarm)" (contextmenu)="onContextMenu($event, alarm)" [mdMenuTriggerFor]="appMenu"></alarm-item>
    </div>
</div>

<md-menu #appMenu="mdMenu">
    <!-- Menu content -->
</md-menu>

有什么建议吗？

Answer 1

我发现继承MdMenuTrigger是一种方法。

@Directive({
  selector: '[ctx-menu]',
  host: {
    'aria-haspopup': 'true',
    '(mousedown)': '_handleMousedown($event)',
    '(keydown)': '_handleKeydown($event)',
    '(click)': '_handleClick($event)',

  },exportAs:'ctxMenu'
})
export class CtxMenuTrigger extends MdMenuTrigger{

    @Input('For') // Route the menu to the superclasses menu
    get _ctxMenuFor(): MdMenuPanel {
        return this.menu;
    }
    set _ctxMenuFor(v: MdMenuPanel) {
        this.menu = v;
    }
    _handleClick(e){
        // absorb left click event
    }
    openCtxMenu(e){
        super._handleClick(e);
        // return false so contextmenu event stops the browsers rightclick menu
        return false
    }
}

然后是在HTML中声明的案例

<div class="list">
    <div *ngFor="let alarm of (_alarms | alarmsFilter:search.value)">
        <alarm-item [alarm]="alarm" (onClick)="onSelection(alarm)" 
            #rclick=ctxMenu ctx-menu 
            [For]="appMenu"
            (contextmenu)="rclick.openCtxMenu()" 
        ></alarm-item>
    </div>
</div>

<md-menu #appMenu="mdMenu">
    ...
</md-menu>

不确定它是否特别优雅，但似乎工作正常。

Answer 2

这个怎么样？

   @Directive({
    selector: '[rightClickTrigger]',
    host: {
        'aria-haspopup': 'true',
        '(click)': '_handleClick($event)',
        '(contextmenu)': 'handleContext($event)',
    }
})
export class RightClickTrigger extends MdMenuTrigger{
    @Input('rightClickTrigger')
    get _menuFor(): MdMenuPanel{
        return this.menu;
    }
    set _menuFor(v: MdMenuPanel){
        this.menu = v;
    }
    _handleClick(e) {
        // left click
    }
    handleContext(e){
        e.preventDefault(); // prevents the browsers context menu
        super._handleClick(e);
    }
}

然后在HTML中

<some-item [rightClickTrigger]="someMenu"></some-item>

<md-menu #someMenu>
 ....
</md-menu>

使用Angular Material 2菜单作为列表项的上下文菜单

2 个答案: