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方法：

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

另请参阅：

What are all the valid selectors for ViewChild and ContentChild?

Answer 2

您可以将MenuBar用于相同的行为，也可以在menu中使用任何其他基于prime-ng的选项

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

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

2 个答案: