角のカスタムコンテキストメニュー

Question

私は簡単なことを作成しようとしています - 私はいくつかの要素の削除オプションとして "X"を表示するカスタムコンテキストメニューを作成したいと思います私のページ。理想的には、このプロジェクトを1つのコンポーネントファイルに保存しようとしているので、別のコンポーネントを自分で作成するのではなく、この機能のために外部ライブラリを使用するのが理想的です（この質問には時間がありません）。

私は既に完璧なライブラリのように見えました：https://github.com/isaacplmann/ngx-contextmenu、それは意図したとおりに動作していません。

メニューが簡単に表示され壊れunusuable、のようなので：Xに付属

（実行）イベントが発火しませんし、意図したようなメニューが明確に表示されません。

要素メニューが接続されている：

<div 
    id="playhead" 
    (mousedown)="movePlayheadByMouse()" 
    [contextMenu]="deleteMenu" 
> 
    <span id="playhead-top">&#9930;</span> 
    <div id="playhead-line"></div> 
</div> 

メニュー自体：

<context-menu #deleteMenu> 
    <ng-template contextMenuItem (execute)="print('click')">X</ng-template> 
</context-menu> 

誰もこれが機能しない理由いくつかの洞察を持っている場合、これは私が現在使用しているコードです。

印刷機能（コンソールにだけログ）

private print(val : string) : void 
{ 
    console.log(val) 
} 

このNGX-コンテキストメニューコンポーネントがありませんそれはたくさんのサポートを持っているようです、私は他の方法を試してみたいと思います。あなたのための私の質問はすべてです：

1）この目的のためにうまくいく他のカスタムメニューコンポーネントライブラリについて知っていますか？

OR

2）あなたはどのように角度素材MD-メニュートリガーの代わりに左クリックを右クリックして変更を知っていますか？ （この場合、角度材料のmdメニューを使用できますか？）

ありがとう！ ラース

Answer 1

テンプレートで、あなただけ利用できるテンプレートスコープ持つ（グローバルスコープではないが、しかしconsoleはグローバルスコープである）ので、このコードで(execute)="console.log('click')"あなたのハンドラは、動作しません
ですから、関数を呼び出す必要がありますあなたはこのようにマニュアルトリガを追加できます：

class MyComponent { 
    @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger; 

    someMethod() { 
    this.trigger.openMenu(); 
    } 
} 

そして目の角材料として
(execute)="functionFromComponent('click')"

のようなコンポーネントから通常のクリックイベントにバインドsomeMethod() EN（右ボタンのクリックを除外する）

も参照してください：https://material.angular.io/components/menu/overview