PrimeNG p-accordion组件如何添加带图标等自定义内容的头部文本？

你不需要用header属性传入纯文本，用PrimeNG提供的p-header模板指令就能插入任意自定义内容，包括图标、按钮、样式文本等，修改后代码参考如下：

<p-accordion>
  <p-accordionTab>
    <!-- 自定义头部区域 -->
    <ng-template p-header>
      <!-- 可插入任意元素，示例为PrimeIcons图标+文本 -->
      <span class="pi pi-calendar mr-2"></span>
      <span>Header 1</span>
      <span class="pi pi-info-circle ml-2" style="color: #2563eb;"></span>
    </ng-template>
    <!-- 面板原有内容区 -->
    Content 1
  </p-accordionTab>
  <p-accordionTab>
    <ng-template p-header>
      <span class="pi pi-user mr-2"></span>
      <span>Header 2</span>
      <button pButton type="button" icon="pi pi-cog" class="p-button-text p-button-sm ml-3"></button>
    </ng-template>
    Content 2
  </p-accordionTab>
  <p-accordionTab>
    <ng-template p-header>
      <span class="pi pi-folder mr-2"></span>
      <span>Header 3</span>
    </ng-template>
    Content 3
  </p-accordionTab>
</p-accordion>

补充说明：

• 可以直接用PrimeNG自带的PrimeIcons图标库，也可以用Font Awesome等其他图标库，只需要正确引入对应图标类即可
• 自定义头部里可以放任意Angular支持的内容，包括绑定变量、点击事件、条件渲染、表单组件等
• 如果需要调整头部间距、对齐方式，直接给自定义元素加class或者内联样式即可，不受默认header属性的样式限制

内容的提问来源于stack exchange，提问作者Agata