单击菜单项时如何显示覆盖？

Question

我试图在点击菜单项时显示叠加层（示例：点击项目 1、项目 2 或项目 3）。到目前为止，我有这个按钮 (Click me)，当您单击它时，它会在其正下方显示一个叠加层。单击任何菜单项时，我希望具有相同的功能。有谁知道如何让它工作？

这是我的代码：

<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>

Answer 1

您可以使用 @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)}))

Forked Stackblitz

另请参阅：

Answer 2

您可以将 MenuBar 用于相同的行为或 prime-ng

中任何其他基于 menu 的选项

https://www.primefaces.org/primeng/#/menubar

单击菜单项时如何显示覆盖？

How to show overlay when clicking on a menu item?

primeng

angular