日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 >

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

發布時間:2025/3/21 24 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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-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 制作右键菜单的全部內容,希望文章能夠幫你解決所遇到的問題。

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