- 没多少逻辑,就直接贴代码了
- 下面是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>
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("删除了一个元素");
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。