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

共计 1354 个字符，预计需要花费 4 分钟才能阅读完成。

没多少逻辑，就直接贴代码了
下面是 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(“ 删除了一个元素 ”);
}
}