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

Question

我试图在用户右键单击报警列表中的项目时显示上下文菜单。问题是我需要使用指令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> 

而且我的组件打字稿文件看起来像这样：

@Component({ 
    selector: // My selector 
    templateUrl: // My template URL 
}) 
export class AlarmComponent { 
    @Input() alarm; 
    @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger; 

    // ... 

    private onContextMenu($event: Event, alarm: Alarm): void {   
     this.trigger.openMenu(); 

     $event.preventDefault(); 
    } 

有什么建议？

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>