我试图在单击菜单项时显示叠加层（例如：单击第 1 项、第 2 项或第 3 项）。到目前为止，我有这个按钮（点击我），当你点击它时，它会在它的正下方显示一个叠加层。单击任何菜单项时，我希望具有相同的功能。有谁知道如何让它工作？
这是我的代码：
<p-menubar [model]="menuItems"></p-menubar>
<p-overlayPanel #op>
Content
</p-overlayPanel>
<br/><br/>
<button type="text" pButton label="Click me" (click)="op.toggle($event)"></button>
【问题讨论】：
您可以使用@ViewChild 装饰器来获取OverlayPanel 实例，并在其上调用toggle 方法：
component.ts
@ViewChild('op') op: OverlayPanel;
toggleOverlay = ({ originalEvent }) => this.op.toggle(originalEvent);
menuItems: Array<MenuItem> = [
{
label: 'item 1',
command: this.toggleOverlay,
}, {
label: 'item 2',
command: this.toggleOverlay,
}, {
label: 'item 3',
command: this.toggleOverlay,
}
];
// or
menuItems2 = ['item1', 'item2', 'item3']
.map(item => ({ label: item, command: ({ originalEvent }) => this.op.toggle(originalEvent)}))
另见：
【讨论】：
您可以将MenuBar 用于相同的行为或prime-ng 中的任何其他基于menu 的选项
【讨论】：