각도 재료 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> 

그리고 내 구성 요소 타이프 스크립트 파일은 다음과 같습니다 :

내 코드는 다음과 같습니다

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