生活随笔
收集整理的這篇文章主要介紹了
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>
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 制作右键菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
