Angular11 PrimeNG中autoComplete选中后如何动态打开对应accordion标签页

核心思路是利用你项目中已经在复用的LayersService做跨组件状态同步，不需要硬编码任何分组配置，完全适配动态结构，步骤如下：

第一步：修改LayersService添加状态管理 #

在你的LayersService中新增状态存储和匹配分组的方法：

import { BehaviorSubject, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// 原有类属性保留，新增以下内容
public activeAccordionGroup$ = new BehaviorSubject<string | null>(null);

// 新增方法：根据图层实例查找所属分组
getGroupByLayer(targetLayer: any): string | null {
  for (const group of this.tamarGroups) {
    // 按图层唯一key匹配，比直接对比对象更稳定
    const hasLayer = this.tamarGroups[group].some(layer => layer.key === targetLayer.key);
    if (hasLayer) return group;
  }
  return null;
}

第二步：修改第一个组件的searchLayer方法 #

选中图层时同步匹配到的分组到服务状态中：

searchLayer(event) {
  const layer = this.layersService.getLayerByCaption(event);
  if (!layer.visible) {
    this.layersService.setLayersOn(layer);
  }
  // 新增：查找图层所属分组，更新服务状态
  const targetGroup = this.layersService.getGroupByLayer(layer);
  if (targetGroup) {
    this.layersService.activeAccordionGroup$.next(targetGroup);
  }
}

第三步：修改手风琴组件逻辑 #

首先在手风琴组件的ts文件中订阅服务的分组状态：

// 组件类属性
activeGroup: string | null = null;
private destroy$ = new Subject<void>();

ngOnInit() {
  this.layersService.activeAccordionGroup$
    .pipe(takeUntil(this.destroy$))
    .subscribe(group => {
      this.activeGroup = group;
    });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

然后修改手风琴HTML中p-accordionTab的selected绑定逻辑：

<p-accordionTab 
  *ngFor="let group of layersService.tamarGroups" 
  [selected]="group === activeGroup"
>
<!-- 原有标签内的内容无需修改 -->
</p-accordionTab>

扩展适配 #

如果你的手风琴需要支持同时打开多个标签，只需要给p-accordion添加[multiple]="true"属性即可，该逻辑依然生效，只会触发对应分组的展开状态，不影响其他已打开的标签。

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