要将p-dialog直接显示在组件上而不是显示在覆盖层上,您可以使用以下方法:
import { DialogModule } from 'primeng/dialog';
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: 'your-component.component.html',
styleUrls: ['your-component.component.css']
})
export class YourComponent {
@ViewChild('appendToComponent', { static: false }) appendToComponent: ElementRef;
displayDialog: boolean = false;
// Other component code here
}
ngOnInit() {
setTimeout(() => {
this.appendToComponent.nativeElement.parentNode.removeChild(this.appendToComponent.nativeElement);
document.querySelector('.your-component-class').appendChild(this.appendToComponent.nativeElement);
}, 0);
}
请注意,将 .your-component-class 更改为您的组件的实际样式类。
通过这些步骤,您应该能够将p-dialog直接显示在组件上,而不是显示在覆盖层上。