如何从Primeng Panel菜单中获取所选项目

Question

我正在使用Primeng的Panelmenu。当有人单击"面板"菜单中的某个项目时，我想获取该项目。

<p-sidebar [(visible)]="display">
<p-panelMenu [model]="sidebarItems" [style]="{'width':'280px'}"></p-panelMenu>
</p-sidebar>

例如，如果有人从下面选择了公寓选项，我想得到它。我该如何实现这一点？

this.sidebarItems = [
{
label:'Home',
icon:'pi pi-fw pi-home',
routerLink: '/home',
items: [
{label:'Apartment',
icon:'pi pi-fw pi-home',
routerLink: '/apartment',}
]
},
{
label:'Contact',
icon:'pi pi-fw pi-phone',
routerLink: ['/contact'],
},
];

Answer 1

您可以向每个保存活动项的菜单项添加命令：

activeItem: MenuItem;
...
{
label: 'Contact',
icon: 'pi pi-fw pi-phone',
routerLink: ['/contact'],
command: e => this.activeItem = e.item,
}

您也可以将此应用于菜单的每个项目和子项目：

private fixupItems(items: MenuItem[]): void {
items?.forEach((item) => {
item.command = (e) => (this.activeItem = e.item);
this.fixupItems(item.items);
});
}

StackBlitz