PrimeNG ConfirmPopup组件appendTo绑定失败，如何指定父div挂载？

你遇到的问题核心是PrimeNG的ConfirmPopup组件本身并没有appendTo输入属性，所以直接在<p-confirmPopup>标签上绑定会抛出属性不存在的错误。正确的做法是在调用confirmationService.confirm()方法时，通过配置参数指定挂载目标。

具体实现步骤 #

• 保留模板中的目标元素模板变量#appendMe
• 在触发弹窗的confirm()方法配置中，添加appendTo字段并传入目标元素

修改后的完整代码 #

import { Component, ViewChild, ElementRef } from '@angular/core';
import { ConfirmationService, MessageService } from 'primeng/api';
import { ConfirmPopupModule } from 'primeng/confirmpopup';

@Component({
  selector: 'app-prime-button',
  standalone: true,
  imports: [ConfirmPopupModule],
  providers: [ConfirmationService, MessageService],
  template: `<div #appendMe>appendme</div>
    <p-confirmPopup></p-confirmPopup>
    <button (click)="openConfirm()">
      open confirm
    </button> `,
  styleUrl: './prime-button.component.css',
})
export class PrimeButtonComponent {
  @ViewChild('appendMe') appendMe!: ElementRef<HTMLDivElement>;

  constructor(
    public confirmationService: ConfirmationService,
    public messageService: MessageService
  ) {}

  openConfirm() {
    this.confirmationService.confirm({
      message: 'test',
      appendTo: this.appendMe.nativeElement // 指定挂载目标元素
    });
  }
}

补充说明 #

• 通过@ViewChild获取模板变量对应的DOM元素，传入confirm()方法的配置项中
• 这样弹窗会被挂载到#appendMe对应的div下，而不是默认的body节点

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