• 沒多少邏輯，就直接貼代碼了
• 下面是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-menunzInDropDownnzSelectable(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("刪除了一個元素");} }

總結

以上是生活随笔為你收集整理的Angular7 ng-zorro-antd 制作右键菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。