生活随笔
收集整理的这篇文章主要介绍了
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 制作右键菜单的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
