Angular 2+的上下文菜单 - ng2-right-click-menu

Angular 2+的上下文菜单 - ng2-right-click-menu
插件名称 ng2-right-click-menu
发布时间 2020年9月9日
插件作者 msarsha

Angular 2+应用程序的最小的,可自定义的右键单击上下文菜单组件。

安装:

npm install –save ng2-right-click-menu

用法

定义基本菜单模板

菜单模板是使用该sh-context-menu组件作为菜单包装器构建的,并ng-templateshContextMenuItem每个菜单项的指令嵌套在一起:

shContextMenuItem指令提供了一个模板变量(let-data),使您可以访问菜单中附加的数据对象。

<sh-context-menu #menu>
  <ng-template shContextMenuItem let-data (click)="onClick($event)">
    <div>
      Menu Item - {{data.label}}
    </div>
  </ng-template>
</sh-context-menu>

将菜单附加到元素

通过使用shAttachMenu伪指令并提供#menu(来自上述示例)模板变量来进行附加工作:

提供给[shMenuData]输入的对象将作为ng-templates 内的模板变量提供,其中shContextMenuItem

<div [shAttachMenu]="menu" [shMenuData]="data">右击</div>