Angular2实现右键菜单

建议

• 一开始，想使用ngx-contextmenu来实现，需要引入第三方库，结果导入包的时候引用容易出问题。建议使用ng-zorro-antd的context-menu来开发

Demo

• html

//触发右键菜单的创建
 <div  (contextmenu)="contextMenu($event,template)"></div>
  <ng-template #template>
  //右键菜单的item项
   <ul nz-menu nzInDropDown (nzClick)="close()">
       <li nz-menu-item (click)="changeChartType()">饼图</li>
       <li nz-menu-item>柱状图</li>
    </ul>
  </ng-template>

• ts
• 声明导入

import { NzDropdownService, NzDropdownContextComponent} from "ng-zorro-antd";

• 构造函数里注入右键菜单的服务

//构造函数里注入右键菜单的服务
private dropdown: NzDropdownContextComponent;
constructor( private nzDropdownService: NzDropdownService) { }

• 创建右键菜单和关闭右键菜单的代码

    close(): void {
        this.dropdown.close();
    }

• 右键菜单的菜单项的单击事件的处理

    //右键菜单的菜单项的单击事件处理
    changeChartType(): void {
    }