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(“删除了一个元素”);
}
}