PrimeNG：DynamicDialog 的自定义标题答案

【问题标题】：PrimeNG: custom header for DynamicDialogPrimeNG：DynamicDialog 的自定义标题
【发布时间】：2026-02-14 03:05:02
【问题描述】：

有没有办法为动态对话框定义自定义标题模板？

对于普通对话框，您可以使用自定义 html 代码定义 p-header 标记。

但我没有找到任何方法来为动态对话框执行此操作。

【问题讨论】：

【解决方案1】：

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>

【讨论】：

使用 p-dialog 非常不相同。内容（和任何子组件）由父组件初始化（并且只是隐藏），而不是在对话框打开时初始化。如果子组件正在执行任何繁重的工作、API 调用等，这可能会对性能产生巨大影响。