Angular 实现右键菜单

产品提的新需求，希望在数据行可以像使用 <a> 标签一样 右键选择新标签页打开。 同时考虑到如果单纯使用 <a> 标签 那么每次点击都要刷新浏览器地址。效果不是很理想。

因此分析了一下，决定使用Angular中的下拉菜单。在数据行右键自定义下拉菜单，提供新标签页打开选项。具体代码实现如下 ：

<!-- html 文件中 添加右键菜单组件 --> 
<a (click)="gotoDetail(item)"  (contextmenu)="contextMenu($event, contextTemplate,item)">{{item.orderCode}}</a>

<ng-template #contextTemplate>
  <ul nz-menu
      nzInDropDown
      nzSelectable
      (nzClick)="close()">
    <li nz-menu-item
        (click)="gotoDetailOnNewPage()">
      <i class="anticon anticon-link anticon-right-margin"></i>
      <span>在新页面中打开链接</span>
    </li>
  </ul>
</ng-template>

// 引入angular 右键菜单
import {  NzDropdownContextComponent,NzDropdownService } from 'ng-zorro-antd';

constructor(
    public dropdownService: NzDropdownService
) { }

dropdown:NzDropdownContextComponent;

// 右键菜单-关闭  
close(){
  this.dropdown.close();
}

// 右键菜单-打开
contextMenu($event,template){
  this.dropdown=this.dropdownService.create($event,template);
}