如何在单击菜单项时显示叠加层

Question

我试图在单击菜单项时显示覆盖层(例如：单击第 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>

Answer 1

您可以使用

@ViewChild装饰器来获取OverlayPanel实例，并简单地在其上调用toggle方法：

组件.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)}))

分叉堆叠闪电战

另请参阅：

• ViewChild 和 ContentChild 的所有有效选择器是什么？

Answer 2

您可以使用MenuBar进行相同的行为或任何其他基于menu的选项prime-ng

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