Angular 区分material 手风琴

我有一个包装的垫子手风琴组件的Angular material .当用户点击特定的手风琴时，我试图区分不同的手风琴.

以下是我的代码

Wrapper个

Mat accordion HTML个

<mat-accordion>
    <mat-expansion-panel (opened)="data.panelOpenState === true" (closed)="data.panelOpenState === false" [expanded]="data.expanded">
        <mat-expansion-panel-header (click)="stateValue()">
            <mat-panel-title>
                {{ data?.title }}
            </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-content></ng-content>
    </mat-expansion-panel>
</mat-accordion>

Mat accordion TS个

import { Component, Input, OnInit } from '@angular/core';
import { SidePanelAccordianData } from './side-panel-accordian.model';
import { SidePanelAccordianService } from './side-panel-accordian.service';

@Component({
  selector: 'app-side-panel-accordian',
  templateUrl: './side-panel-accordian.component.html',
  styleUrls: ['./side-panel-accordian.component.scss']
})
export class SidePanelAccordianComponent implements OnInit {
  @Input() data: SidePanelAccordianData;
  panelOpenState;

  constructor(private accordianStateService: SidePanelAccordianService) { }

  ngOnInit(): void {
  }

  stateValue() {
    this.data.panelOpenState = !this.data.panelOpenState;
    this.accordianStateService.setOpenState(this.data.panelOpenState);
  }

}

Mat accordion Service个

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SidePanelAccordianService {
  private _openStateBehaviorSubject = new BehaviorSubject(false);
  public openState$ = this._openStateBehaviorSubject.asObservable();

  public setOpenState(value: boolean) {
    this._openStateBehaviorSubject.next(value);
  }
}

Mat accordion model个

export class SidePanelAccordianData {
  public title: string = '';
  public panelOpenState: boolean;
  public expanded: boolean;


  constructor(args) {
    this.title = args.title;
    this.panelOpenState = args.panelOpenState;
    this.expanded = args.expanded;
  }
}

Component where I am using the wrapper个

HTML个

<app-side-panel-accordian [data]="{title:'Title', panelOpenState: panelOpenState, expanded: firstDriverExpanded}">
    <div class="inner-row-data">
      <form-input [formStatus]="formStatus" [parentFormGroup]="setupForm" [data]="{
        formControlName: 'firstDriverName',
        name: 'firstDriverName',
      }" (onBlur)="setFirstDriverDetails('name')">
      </form-input>
    </div>
</app-side-panel-accordian>

<app-side-panel-accordian [data]="{title:'Title', panelOpenState: panelOpenState, expanded: secondDriverExpanded}">
    <div class="inner-row-data">
      <form-input [formStatus]="formStatus" [parentFormGroup]="setupForm" [data]="{
        formControlName: 'secondDriverName',
        name: 'secondDriverName',
      }" (onBlur)="setSecondDriverDetails('name')">
      </form-input>
    </div>
</app-side-panel-accordian>

TS个

this.accordianStateService.openState$.subscribe(data =>{
  this.accordianState = data;
  if(!this.accordianState) {
    this.firstDriverExpanded = false;
    this.secondDriverExpanded = false;
  }
});

因此，正如您在上面的组件中看到的，我在其中使用了垫手风琴包装，我可以有多个手风琴，所以我的问题是，当this.accordianStateService.openState$值在单击时更新时，我将如何区分手风琴？

我需要区分的原因是因为我有规则来决定何时打开或关闭某个手风琴.