PrimeNg OverlayPanel如何向自定义模板传递自定义参数？

完全可以实现你期望的调用形式，具体方案如下：

实现步骤 #

1. 模板定义OverlayPanel #

和你期望的写法基本一致，如果你要直接使用let-item的无绑定写法，只需要在传参时指定默认上下文即可：

<p-overlayPanel #op>
    <ng-template pTemplate let-item>
        <div (click)="delete(item.id)">
            {{item.name}}
        </div>
    </ng-template>
</p-overlayPanel>

2. 列表触发处传入当前项 #

OverlayPanel的toggle、show方法都支持第二个参数作为模板上下文，你在列表遍历触发时直接传入当前列表项即可：

<!-- 列表遍历逻辑 -->
<div *ngFor="let currentItem of yourList">
    <!-- 触发面板打开的元素，示例为按钮 -->
    <button (click)="op.toggle($event, { $implicit: currentItem })">打开操作面板</button>
</div>

可选：通过TS代码手动调用打开 #

如果需要在组件类中控制面板打开，可先获取OverlayPanel实例再调用show方法传参：
首先在TS文件中获取实例：

import { OverlayPanel } from 'primeng/overlaypanel';
import { ViewChild } from '@angular/core';

// ...
export class YourComponent {
    @ViewChild('op') op!: OverlayPanel;
    yourList = [/* 你的列表数据 */];

    openOverlay(event: Event, item: any) {
        // 传入$implicit对应模板中let-item的默认取值
        this.op.show(event, { $implicit: item });
    }
}

模板触发逻辑调整为：

<button (click)="openOverlay($event, currentItem)">打开操作面板</button>

说明 #

• 上下文对象中$implicit是默认值键名，对应ng-template中let-xxx无赋值声明的变量
• 如果你需要传多个参数，可以在上下文对象中自定义键名，模板中用let-xxx="自定义键名"取值即可，示例：

  // 传参
  this.op.show(event, { item: currentItem, extraParam: '自定义额外参数' })
  

  <!-- 模板取值 -->
  <ng-template pTemplate let-item="item" let-extra="extraParam">
  

内容的提问来源于stack exchange，提问作者benshabatnoam