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

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 的有效选择器是什么？