Menu Service

The data format is an array of Menu, where text text property muse be required, And it's not affected by external components (such as sidebar-nav),

This is because menus it's essential part of the applications, And it can be used more effectively as a service, such as: dynamically generate navigation, title etc.

Suggest: Start up Angular (startup.service.ts) After get menu data from remote, call the add() method.

API

MethodDescription
addSetting menu data
clearClear menu data
resumeReset menu, may need call when I18N, user acl changed
findFind a menu item by url or key
getItemGet menu item based on key
getPathByUrlGet menu list based on url
setItemSet menu item
openOpen of the menu
toggleOpenToggle menu open or close
openAllToggle all menu open or close

recursive

Recursive upward find, for example, the menu data source contains /ware, then /ware/1 is equivalent to /ware.

PropertyDescriptionTypeDefault
textText of menu item, can be choose one of text or i18n (Support HTML)string-
i18nI18n key of menu item, can be choose one of text or i18n (Support HTML)string-
groupWhether to display the group namebooleantrue
linkRouting for the menu item, can be choose one of link or externalLinkstring-
externalLinkExternal link for the menu item, can be choose one of link or externalLinkstring-
targetSpecifies externalLink where to display the linked URL_blank,_self,_parent,_top-
iconIcon for the menu item, only valid for the first level menustring | MenuIcon-
badgeBadget for the menu item when group is truenumber-
badgeDotWhether to display a red dot instead of badge valueboolean-
badgeStatusBadge colorsuccess,processing,default,error,warningerror
openWhether open for the menu itembooleanfalse
disabledWhether disable for the menu itembooleanfalse
hideWhether hidden for the menu itembooleanfalse
hideInBreadcrumbWhether hide in breadcrumbs, which are valid when the page-header component automatically generates breadcrumbsboolean-
aclACL configuration, it's equivalent to ACLService.can(roleOrAbility: ACLCanType) parameter valueany-
shortcutWhether shortcut menu itemboolean-
shortcutRootWheter shortcut menu root nodeboolean-
reuseWhether to allow reuse, need to cooperate with the reuse-tab componentboolean-
openWhether to expand, when checkStrictly is valid in sidebar-nav componentboolean-
keyUnique identifier of the menu item, can be used in getItem, setItem to update a menustring-
childrenChildren for the menu itemMenu[]-
PropertyDescriptionTypeDefault
[type]Type for icon; img, svg Size uses 14px width and heightclass,icon,iconfont,img,svgicon
[value]Value for the icon, can be set Class Name, nz-icon of nzType, imagestring-
[theme]Type of the ant design iconoutline,twotone,filloutline
[spin]Rotate icon with animationbooleanfalse
[twoToneColor]Only support the two-tone icon. Specific the primary colorstring-
[iconfont]Type of the icon from iconfontstring-
[rotate]Rotate degreesnumber-