如何在Angular另一组件中获取Mat Accordion的panelOpenState值？

方案一：通过@Output() 输出状态变化（推荐，符合Angular组件通信规范） #

这种方式逻辑清晰，子组件在状态变更时主动通知父组件，父组件接收事件后更新自身变量。

1. 修改子组件TS，添加输出事件 #

在SidePanelAccordianComponent中新增输出属性，状态变化时触发事件传递最新值：

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

@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;
  // 定义输出事件
  @Output() panelStateChanged = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit(): void {
  }

  stateValue() {
    this.data.panelOpenState = !this.data.panelOpenState;
    // 触发事件传递最新状态
    this.panelStateChanged.emit(this.data.panelOpenState);
  }

  // 修正面板展开/收起的事件处理
  onPanelOpened() {
    this.data.panelOpenState = true;
    this.panelStateChanged.emit(true);
  }

  onPanelClosed() {
    this.data.panelOpenState = false;
    this.panelStateChanged.emit(false);
  }
}

2. 修正子组件HTML的事件绑定 #

原代码中(opened)="data.panelOpenState === true"是判断语句而非赋值，改为调用上述方法：

<mat-accordion>
    <mat-expansion-panel (opened)="onPanelOpened()" (closed)="onPanelClosed()" [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>

3. 父组件监听事件更新变量 #

在父组件HTML中添加事件监听，同步自身变量：

<app-side-panel-accordian 
  [data]="{title:'Title', panelOpenState: panelOpenState, expanded: secondDriverExpanded}"
  (panelStateChanged)="panelOpenState = $event"
>
    <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.panelOpenState即可获取最新的面板状态。

方案二：传递引用类型对象（利用对象引用传递特性） #

JavaScript中对象为引用类型，子组件修改对象属性会直接同步到父组件的原对象。

1. 父组件TS中定义完整的实例对象 #

import { SidePanelAccordianData } from './path-to/side-panel-accordian.model';

// 父组件类内部
panelData: SidePanelAccordianData;
panelOpenState: boolean = false;
secondDriverExpanded: boolean = false;

ngOnInit() {
  this.panelData = new SidePanelAccordianData({
    title: 'Title',
    panelOpenState: this.panelOpenState,
    expanded: this.secondDriverExpanded
  });
}

2. 父组件HTML传递该对象 #

<app-side-panel-accordian [data]="panelData">
    <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>

3. 父组件获取状态 #

子组件修改状态后，父组件直接通过对象属性获取最新值：

// 父组件任意方法中使用
checkPanelState() {
  console.log(this.panelData.panelOpenState);
}

注意事项 #

原代码中(opened)="data.panelOpenState === true"是判断逻辑而非赋值操作，会导致状态无法正确更新，需改为赋值或调用处理方法。

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