有没有办法为动态对话框定义自定义标题模板?
对于普通对话框,您可以使用自定义 html 代码定义 p-header 标签。
但是我没有找到任何方法可以对动态对话框执行此操作。
回答有点晚了。但也许其他人也在寻找解决方法。据我所知,这仍然是不可能的,因为 GitHub 上的这个问题 仍然处于开放状态。
但是在DynamicDialog文档中提到,您不能使用参数
showHeader
显示标题。这意味着您可以轻松隐藏默认标题,并在对话框的组件中设计您自己的标题。
PrimeNG 文档中没有提到将自定义模板添加到 DynamicDialog 标头的官方方法。当我们打开 DynamicDialog 时,我们只附加对话框的主体,而不附加页眉/页脚。
您可以在打开 DynamicDialog 时为其添加动态标题。希望这会有所帮助。
const ref = this.dialogService.open(DialogComponent, {
data: this.data,
header: this.title,
width: '60%'
});
您可以修改 DynamicDialog 标题的 css,例如:
::ng-deep .p-dialog .p-dialog-header {
border-bottom: 1px solid #000;
}
重要提示: 您可以在 PrimeNG 中使用简单的对话框,您可以在其中创建自定义页眉、正文和页脚。它的工作方式与 DynamicDialog 相同。请像下面这样提及 modal=true :
<p-dialog [(visible)]="display" [modal]="true">
<p-header>
Header content here
</p-header>
Content
<p-footer>
//buttons
</p-footer>
有一种解决方法。
在打开对话框的组件中
show() {
this.ref = this.dialogService.open(DynamicDialogContent, {
header: '',
width: '70%',
contentStyle: { overflow: 'auto' },
baseZIndex: 10000
});
}
在 DynamicDialogContent 组件中
ngOnInit() {
const componentRef = this.viewContainerRef.createComponent(CustomHeader);
let titleSpan = document.getElementsByClassName('p-dialog-title')[0];
this.renderer.appendChild(titleSpan, componentRef.location.nativeElement)
}
以及自定义标头组件
@Component({
template: ` <b>I'm custom dynamic dilog header</b>`
})
export class CustomHeader implements OnInit {
constructor() {}
ngOnInit() {
}
}
这是完整的演示 - stackblitz
可以这样做:
this.resultsDialogRef = this.dialogService.open(ResultsComponent, {
header: 'Preview Results',
width: '70%',
contentStyle: {"overflow": "auto"},
baseZIndex: 5000,
maximizable: true,
templates: {
header: ResultsDialogHeaderComponent
}
}
);