本文讲解如何正确使用 Angular Material 的 MatExpansionPanel 组件实现展开/折叠状态的响应式控制，重点解决仅用单向绑定 [expanded] 无法动态更新面板状态的问题，并说明为何必须改用双向绑定 [(expanded)]。
本文讲解如何正确使用 angular material 的 matexpansionpanel 组件实现展开/折叠状态的响应式控制，重点解决仅用单向绑定 `[expanded]` 无法动态更新面板状态的问题，并说明为何必须改用双向绑定 `[(expanded)]`。
在 Angular 应用中，
关键原因在于：[expanded] 是单向属性绑定（Input），它仅将组件类中的值“推入”模板，但不会监听面板自身交互（如用户手动点击展开/折叠）所触发的状态变更。因此，当用户手动展开面板后，panelOpenState 实际已与 DOM 状态脱节；后续通过代码设置 this.panelOpenState = false 虽然更新了模型，但由于变更检测未被有效触发（尤其在某些异步或事件上下文中），或因面板内部状态未同步，导致视图未刷新。
✅ 正确解法是使用双向绑定语法 [(expanded)]：
<mat-accordion class="mat-accordion-setting">
<mat-expansion-panel hideToggle id="userMgmtId" [(expanded)]="panelOpenState">
<mat-expansion-panel-header>
<mat-panel-title>User</mat-panel-title>
</mat-expansion-panel-header>
<mat-panel-description
id="SubMenu1"
(click)="sideNavLink($event)"
[routerLink]="['/SubMenu1']"
routerLinkActive="active">
SubMenu1
</mat-panel-description>
<mat-panel-description
id="SubMenu2"
(click)="sideNavLink($event)"
[routerLink]="['/SubMenu2']"
routerLinkActive="active">
SubMenu2
</mat-panel-description>
</mat-expansion-panel>
</mat-accordion>[(expanded)] 是 ngModel 风格的语法糖，等价于：
[expanded]="panelOpenState" (expandedChange)="panelOpenState = $event"
它既将 panelOpenState 绑定为输入属性，又监听 expandedChange 输出事件，自动同步用户交互产生的状态变更，确保模型与视图始终一致。
此外，请确保在组件类中正确定义并初始化该状态：
export class NavigationComponent {
panelOpenState = false; // 初始关闭
sideNavLink(event: Event): void {
const anchorId = (event.currentTarget as HTMLElement).id;
// 注意：直接使用 .id 更简洁可靠，避免 getAttribute('id') 的潜在空值风险
if (anchorId !== 'userMgmtId') {
this.panelOpenState = false; // 双向绑定下，此赋值将立即反映到 UI
}
}
}⚠️ 注意事项：
- 确保已导入 MatExpansionPanelModule 和 MatAccordionModule；
- 若面板嵌套在 *ngIf 或动态结构中，需注意生命周期和变更检测时机；
- 避免在 sideNavLink() 中重复调用 event.preventDefault() 或干扰默认行为，除非必要。
总结：[(expanded)] 不仅是语法差异，更是 Angular 响应式设计的核心实践——它建立模型与视图间的闭环同步，是解决“状态更新不生效”类问题的标准化方案。
