AcontextmenubuiltwithAngular(10)inspiredbyui.bootstrap.contextMenu.Bootstrapclassesareincludedinthemarkup,butthereisnoexplicitdependencyonBootstrap.DemoStackblitzexample
Installationnpminstallngx-contextmenu@angular/cdkimportContextMenuModule.forRoot()intoyourappmoduleMakesuretoinclude<!doctypehtml>atthetopofyourindex.htmlUsageAngular5supportPleaseusengx-contextmenu@4.2.0withAngular5projects.
Template<ul><li*ngFor="letitemofitems"[contextMenu]="basicMenu"[contextMenuSubject]="item">RightClick:{{item?.name}}</li></ul><context-menu><ng-templatecontextMenuItem(execute)="showMessage('Hi,'+$event.item.name)">Sayhi!</ng-template><ng-templatecontextMenuItemdivider="true"></ng-template><ng-templatecontextMenuItemlet-item(execute)="showMessage($event.item.name+'said:'+$event.item.otherProperty)">Bye,{{item?.name}}</ng-template><ng-templatecontextMenuItempassive="true">Inputsomething:<inputtype="text"></ng-template></context-menu>ComponentCode@Component({...})exportclassMyContextMenuClass{publicitems=[{name:'John',otherProperty:'Foo'},{name:'Joe',otherProperty:'Bar'}];@ViewChild(ContextMenuComponent)publicbasicMenu:ContextMenuComponent;}ContextMenuItemsEachcontextmenuitemisa<ng-template>elementwiththecontextMenuItemattributedirectiveapplied.Iftheitemobjectisusedinthecontextmenuitemtemplate,thelet-itemattributemustbeappliedtothe<ng-template>element.**Note:**Makesuretousetheitem?.propertysyntaxinthetemplateratherthanitem.propertyastheitemwillbeinitiallyundefined.Everycontextmenuitememitsexecuteevents.The$eventobjectisoftheform{event:MouseEvent,item:any}whereeventisthemouseclickeventthattriggeredtheexecutionanditemisthecurrentitem.Thedividerinputparameterisoptional.Itemsdefaulttonormalmenuitems.Ifdivideristrue,alltheotherinputsareignored.Thepassiveinputparameterisoptional.Ifpassiveistrue,themenuitemwillnotemitexecuteeventsorclosethecontextmenuwhenclicked.Theenabledinputparameterisoptional.Itemsareenabledbydefault.Thiscanbeabooleanvalueorafunctiondefinitionthattakesanitemandreturnsaboolean.Thevisibleinputparameterisoptional.Itemsarevisiblebydefault.Thispropertyenablesyoutoshowcertaincontextmenuitemsbasedonwhatthedataitemis.Thiscanbeabooleanvalueorafunctiondefinitionthattakesanitemandreturnsaboolean.Withinthetemplate,youhaveaccesstoanycomponentsandvariablesavailableintheoutercontext.<context-menu><ng-templatecontextMenuItemlet-item[visible]="isMenuItemType1"[enabled]="false"(execute)="showMessage('Hi,'+$event.item.name)">Sayhi,{{item?.name}}!<my-component[attribute]="item"></my-component>Withaccesstotheoutsidecontext:{{outsideValue}}</ng-template></context-menu>publicoutsideValue="something";publicisMenuItemType1(item:any):boolean{returnitem.type==='type1';}Sub-menusYoucanspecifysub-menuslikethis:
<ul><li*ngFor="letitemofitems"[contextMenu]="basicMenu"[contextMenuSubject]="item">RightClick:{{item?.name}}</li></ul><context-menu><ng-templatecontextMenuItem[subMenu]="saySubMenu">Say...</ng-template><context-menu#saySubMenu><ng-templatecontextMenuItem(execute)="showMessage('Hi,'+$event.item.name)">...hi!</ng-template><ng-templatecontextMenuItem(execute)="showMessage('Hola,'+$event.item.name)">...hola!</ng-template><ng-templatecontextMenuItem(execute)="showMessage('Salut,'+$event.item.name)">...salut!</ng-template></context-menu><ng-templatecontextMenuItemdivider="true"></ng-template><ng-templatecontextMenuItemlet-item(execute)="showMessage($event.item.name+'said:'+$event.item.otherProperty)">Bye,{{item?.name}}</ng-template><ng-templatecontextMenuItempassive="true">Inputsomething:<inputtype="text"></ng-template></context-menu>Notes:
Thesub<context-menu>cannotbeplacedinsidethe<ng-template>thatreferencesit.Sub-menusmaybenestedasdeeplyasyouwish.Upgradefromangular2-contextmenu0.xChangepackage.jsontoreferencengx-contextmenuinsteadofangular2-contextmenuUpgradeto@angular4.xUse<ng-template>insteadof<template>Updateanystylesthatreferenced.angular2-contextmenutouse.ngx-contextmenuinsteadNote:Theimperativewayofdeclaringcontextmenuitemshasbeenremoved.i.e.Youcan'tpassanactionspropertytocontextMenuService.show.next().
UsingvisibleandenabledfunctionsIfyouneedaccesstopropertiesinyourcomponentfromwithintheenabledorvisiblefunctions,youcanpassinanarrowfunction.
<ng-template...[visible]="isMenuItemOutsideValue">publicoutsideValue="something";publicisMenuItemOutsideValue=(item:any):boolean=>{returnitem.type===this.outsideValue;}MultipleContextMenusYoucanusemultiplecontextmenusinthesamecomponentifyouwouldlike.
<ul><li*ngFor="letitemofitems"[contextMenu]="basicMenu"[contextMenuSubject]="item">{{item?.name}}</li></ul><context-menu#basicMenu>...</context-menu><ul><li*ngFor="letitemofitems"[contextMenu]="otherMenu"[contextMenuSubject]="item">{{item?.name}}</li></ul><context-menu#otherMenu>...</context-menu>@ViewChild('basicMenu')publicbasicMenu:ContextMenuComponent;@ViewChild('otherMenu')publicotherMenu:ContextMenuComponent;ContextMenuInaDifferentComponentIfyour<context-menu>componentisinadifferentcomponentfromyourlist,you'llneedtowireupthecontextmenueventyourself.
<ul><li*ngFor="letitemofitems"(contextmenu)="onContextMenu($event,item)">RightClick:{{item.name}}</li></ul>import{ContextMenuService}from'ngx-contextmenu';@Component({...})exportclassMyContextMenuClass{publicitems=[{name:'John',otherProperty:'Foo'},{name:'Joe',otherProperty:'Bar'}];//Optional@Input()contextMenu:ContextMenuComponent;constructor(privatecontextMenuService:ContextMenuService){}publiconContextMenu($event:MouseEvent,item:any):void{this.contextMenuService.show.next({//Optional-ifunspecified,allcontextmenucomponentswillopencontextMenu:this.contextMenu,event:$event,item:item,});$event.preventDefault();$event.stopPropagation();}}TriggeringtheContextMenuwithaDifferentEventThecontextmenucanbetriggeredatanypointusingthemethodabove.Forinstance,totriggerthecontextmenuwithaleftclickinsteadofarightclick,usethishtml:
<ul><li*ngFor="letitemofitems"(click)="onContextMenu($event,item)">LeftClick:{{item.name}}</li></ul>Thiscouldbe(keydown),(mouseover),or(myCustomEvent)aswell.
PositioningtheContextMenuaroundanelementIfyouwanttooverridethecontextmenupositioningtobeappendedtoanelementinsteadofbasedonmouseposition,provideananchorElementtothecontextMenuService.Thismakessenseifyouwanttotriggerthecontextmenuwithanon-MouseEvent.
publiconContextMenu($event:KeyboardEvent,item:any):void{this.contextMenuService.show.next({anchorElement:$event.target,//Optional-ifunspecified,allcontextmenucomponentswillopencontextMenu:this.contextMenu,event:<any>$event,item:item,});$event.preventDefault();$event.stopPropagation();}CustomStylesThehtmlthatisgeneratedforthecontextmenulookslikethis:
评论