Angular7 ng-zorro-antd 制作右键菜单

没多少逻辑，就直接贴代码了下面是html模板的代码：<ul nz-menu [style.width]=“300” [nzTheme]="‘dark’" [nzMode]="‘inline’" [nzInlineCollapsed]=“isCollapsed”> <li nz-menu-item (contextmenu)=“contextMenu($event, contextTemplate)">中国</li> <li nz-menu-item (contextmenu)=“contextMenu($event, contextTemplate)">美国</li> <li nz-menu-item (contextmenu)=“contextMenu($event, contextTemplate)">英国</li></ul><ng-template #contextTemplate> <ul nz-menu nzInDropDown nzSelectable (nzClick)=“close()"> <li nz-menu-item (click)=“openRenameListModal()"> <i class=“anticon anticon-edit anticon-right-margin”></i> <span>重命名</span> </li> <li nz-menu-divider></li> <li nz-menu-item (click)=“delete()"> <i class=“anticon anticon-delete anticon-right-margin danger”></i> <span class=“danger”>删除列表</span> </li> </ul></ng-template>下面是ts文件的代码import { Component, TemplateRef } from ‘@angular/core’;import { FormsModule } from ‘@angular/forms’;import { NzDropdownContextComponent, NzDropdownService } from ’ng-zorro-antd’;@Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [’./app.component.css’]})export class AppComponent { constructor( private dropdownService:NzDropdownService ){} dropdown:NzDropdownContextComponent; contextMenu($event:MouseEvent,template:TemplateRef<void>){ this.dropdown=this.dropdownService.create($event,template); } openRenameListModal(){ console.log(“打开了重命名modal”); } close(){ this.dropdown.close(); } delete(){ console.log(“删除了一个元素”); }}