我有一个想要附加到父div的PrimeNG组件,但它似乎总是附加到正文中.

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体中.

如您所见,我已经在修饰器和导入中将Confix PopupModule导入到独立组件中.属性appendTo似乎不存在于在PrimeNG NODE_MODULES文件夹中找到的confirmpopup.d.ts文件中定义的类Confix Popup上.

如何将此弹出元素附加到父div?

谢谢你的阅读.

推荐答案

传递$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>个标记.每个按钮,然后将有弹出附加到它时,点击.

Angular相关问答推荐

如何从Angular TS文件传递$Events对象?

iOS Mobile Safari - HTML5视频覆盖一切

Angular前端调用ALB身份验证后的后端并重定向

单元测试 case 模拟store 中的行为主体

在Angular中将路由解析器提供程序和组件提供程序相结合

具有多重签名的Angular Mocking Service

Rxjs重置执行后的可观察延迟并重新调度Angular

Angular 16-错误NG8002:无法绑定到NGModel,因为它不是输入的已知属性

HTTP拦截器在Angular 17项目中不起作用

在生产模式下使用带Angular 的 livekit

如何在 Angular 中创建通用的可重用组件

如何以Angular 改变环境

如何检测滚动到html元素的底部

将环境变量传递给Angular 库

使用directive指令将类添加到host元素中

如何在 Angular4 中访问组件的 nativeElement?

Angular 没有可用于依赖类型的模块工厂:ContextElementDependency

如何以Angular 获取嵌套表单组的控件

Angularmaterial步进器:禁用标题导航

在 RxJS Observable 中 flatten数组的最佳方法