脚本宝典收集整理的这篇文章主要介绍了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-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("删除了一个元素");
}
}
以上是脚本宝典为你收集整理的Angular7 ng-zorro-antd 制作右键菜单全部内容,希望文章能够帮你解决Angular7 ng-zorro-antd 制作右键菜单所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。