角度アイテム2のメニューをリストアイテムのコンテキストメニューとして使用する

Question

ユーザがアラームリスト内のアイテムを右クリックするとコンテキストメニューを表示しようとしています。問題は、openMenu()をコンポーネントから呼び出すには、指示文mdMenuTriggerForを使用する必要があることです。しかし、この指令は左クリックで動作するように意図されているので、メニューは常に表示されます（左クリック&）。また、右クリックすると、メニューがリストの一番上に表示されます。

私のコードは次のようになります。

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

そして、私のコンポーネントtypescriptファイルは次のようになります。

@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 
    } 
} 

そして、その特にエレガントな場合

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

わからないあなたのHTMLに宣言するその場合、しかし、正常に動作するようです。

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>