如何为PrimeNG accordion手风琴标题添加图片并设置默认展开项

实现方案 #

1. 自定义标题插入图片 #

PrimeNG的p-accordionTab支持自定义头部模板，你可以用<ng-template p-header>重写标题区域的结构，直接在展开箭头和标题文本之间插入图片标签，配合少量样式调整间距即可。

2. 按需默认展开指定项 #

利用p-accordion的activeIndex输入属性绑定变量，在组件初始化阶段判断对应标签的内容是否为空，动态给activeIndex赋值即可实现自定义展开逻辑。

完整示例代码 #

组件HTML代码

<p-accordion [activeIndex]="defaultActiveIndex">
  <p-accordionTab>
    <!-- 自定义头部：箭头后插入图片 -->
    <ng-template p-header>
      <img src="你的图片地址" alt="标题图标" style="width: 16px; height: 16px; margin: 0 8px; vertical-align: middle;">
      Header 1
    </ng-template>
    <!-- 内容区域绑定标识方便判断是否为空 -->
    <div #tab1Content>
      {{ tab1ContentText }}
    </div>
  </p-accordionTab>
  <p-accordionTab>
    <ng-template p-header>
      <img src="你的图片地址" alt="标题图标" style="width: 16px; height: 16px; margin: 0 8px; vertical-align: middle;">
      Header 2
    </ng-template>
    Content 2
  </p-accordionTab>
  <p-accordionTab header="Header 3">
    Content 3
  </p-accordionTab>
</p-accordion>

组件TS代码

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-accordion-demo',
  templateUrl: './accordion-demo.component.html'
})
export class AccordionDemoComponent implements OnInit {
  defaultActiveIndex: number = 0;
  // 第一个标签的内容，可根据业务动态赋值
  tab1ContentText: string = 'Content 1';
  @ViewChild('tab1Content') tab1Content!: ElementRef;

  ngOnInit(): void {
    // 等待DOM渲染完成后判断第一个标签内容是否为空
    setTimeout(() => {
      const tab1HasContent = this.tab1Content.nativeElement.textContent.trim().length > 0;
      this.defaultActiveIndex = tab1HasContent ? 0 : 1;
    }, 0);
  }
}

注意事项 #

• 如果你的手风琴内容是异步加载的，需要在内容赋值完成后再执行是否为空的判断，再更新defaultActiveIndex的值。
• 图片的样式可以根据你的需求自行调整宽高和边距，也可以提取为全局公共类统一管理。

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