在组件之间展开/折叠功能

我有 2 个不同的组件，我在其中使用 Angular - Expansion Panel 进行可扩展的摘要视图。

我能够<mat-expansion-panel>成功集成到单个组件。

我需要帮助，使Component2.html作为母公司Component1.html（中expand-展开请参见下图）

• 组件 1 应该能够独立展开和折叠以显示数据

• 组件 2 应该将组件 1 嵌入到自身中，所以当 Component 1 is expanded it can show its data and display remaining Child components

注意- 组件都具有兄弟关系，no parent child或child - parent

组件1.html

  <div>
    <div class>
      <dl>
        <mat-accordion>
          <mat-expansion-panel (opened)="doExpand = true"
                             (closed)="doExpand = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
        <dt>data</dt>
      </mat-panel-title>
      <mat-panel-description>
        <dd>
          <inline-misal-edit 
                        [(field)]="data.name" [elementType]="a.bName" (fieldChange)="dataModified(data)"
                        cols="30" rows="1"></inline-misal-edit>
          </dd>
      </mat-panel-description>
    </mat-expansion-panel-header>

        <dt>news</dt>
        <dd>{{data.news?.created | news}}</dd>
      </mat-expansion-panel>
    </mat-accordion>
      </dl>
    </div>

组件2.html

  <dl>
    <mat-accordion>
        <mat-expansion-panel (opened)="doExpand = true"
                             (closed)="doExpand = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              misal Id
            </mat-panel-title>
            <mat-panel-description>
              <dd>{{misal.id || 'new'}}</dd>
            </mat-panel-description>
          </mat-expansion-panel-header>
          <dd>{{misal.data[0].name}}</dd>
          <dt>Country Pass</dt>
          <dt>Plugins Program</dt>
          <dd>
            <north-dhamma[(misal)]="misal" [editMode]="editMode" (misalChange)="recordModified.emit()"></registry-number>
          </dd>
          <dt *ngIf="misal.value === 'hovered'">Related Plugins Program</dt>
          <dd *ngIf="misal.value === 'hovered'">
            <land-hole></land-hole>
          </dd>
                </mat-expansion-panel>
      </mat-accordion>
  </dl>

.ts 文件

  panelOpenState = true;                 

更新

罗比在下面给出的答案适用于parent - child component relation 但不适用于sibling component