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