无法绑定到“appendTo”，因为它不是 p-confirmPopup 的已知属性

Question

我有一个 PrimeNG 组件，我想附加到父 div，但它似乎总是附加到主体。

import { Component } 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 [appendTo]="appendMe"></p-confirmPopup>
    <button (click)="confirmationService.confirm({ message: 'test' })">
      open confirm
    </button> `,
  styleUrl: './prime-button.component.css',
})
export class PrimeButtonComponent {
  constructor(
    public confirmationService: ConfirmationService,
    public messageService: MessageService
  ) {}
}

我知道可以使用模板变量来使用属性 [appendTo] 并将相应的元素定位为接收附加元素的元素。

在appendTo 两边加上方括号，我收到以下错误：

Can't bind to 'appendTo' since it isn't a known property of 'p-confirmPopup'.

appendTo 周围没有方括号，该元素仍会附加到 HTML 正文。

如您所见，我已在装饰器和导入中将ConfirmPopupModule 导入到独立组件中。在PrimeNG node_modules 文件夹中找到的confirmpopup.d.ts 文件中定义的ConfirmPopup 类上似乎不存在appendTo 属性。

如何让这个弹出元素附加到父 div 上？

感谢您的阅读。

Answer 1

ConfirmPopup

没有在

api 定义

中定义的属性 [appendTo]。相反，请使用

ConfirmDialog

组件，该组件确实在

api 定义中定义了 

[appendTo]

附加到

附加对话框的目标元素，有效值为“body”或另一个元素的本地 ng-template 变量（注意：对模板变量使用带括号的绑定，例如 [appendTo]="mydiv" 对于具有 #mydiv 的 div 元素作为变量名）。

Answer 2

您传递

$event

，然后将

target

属性设置为

event.target as EventTarget

这应该将其绑定到调用它的按钮。

查看文档中的示例。

import { Component } 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: `
      <p-confirmPopup</p-confirmPopup>
      <button (click)="confirm($event)">open confirm</button> 
  `,
  styleUrl: './prime-button.component.css',
})
export class PrimeButtonComponent {
  constructor(
    public confirmationService: ConfirmationService,
    public messageService: MessageService
  ) {}

  confirm(event) {
    this.confirmationService.confirm({
      target: event.target as EventTarget,
      message: 'test message',
      accept: () => console.log('accept'),
      reject: () => console.log('reject'),
    });
  }
}

根据您的使用案例，您可以在父组件（或根页面）中仅包含一组

<p-confirmPopup></p-confirmPopup>

标签。每个按钮在单击时都会附加弹出窗口。