區分墊手風琴

我有一個angular材料的墊子手風琴組件的包裝。當用戶點擊特定的手風琴時，我試圖區分不同的手風琴。

這是我的代碼

Wrapper

墊子手風琴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>

墊手風琴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);
  }

}

墊子手風琴服務

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);
  }
}

墊子手風琴模型

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;
  }
}

我使用包裝器的組件

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$值時，我將如何區分手風琴？

我需要區分的原因是，我有關于某個手風琴何時打開或關閉的規則。