在 Angular 中使用 mat-expansion-panel 时，仅通过属性绑定 [expanded] 无法响应式更新展开状态；必须改用双向绑定 [(expanded)] 才能确保组件状态与组件类变量同步。
在 angular 中使用 `mat-expansion-panel` 时，仅通过属性绑定 `[expanded]` 无法响应式更新展开状态；必须改用双向绑定 `[(expanded)]` 才能确保组件状态与组件类变量同步。
mat-expansion-panel 的 expanded 输入属性默认为单向数据绑定（[expanded]），它仅将组件类中的值传递给模板，但不会监听面板自身交互（如点击标题）引起的内部状态变更。更重要的是：当外部代码（如 sideNavLink()）修改 panelOpenState 时，若未触发 Angular 的变更检测或未建立响应式连接，视图可能不会及时更新——尤其在某些变更检测策略（如 OnPush）或异步上下文中更易出现。
关键问题在于：你当前使用的是单向绑定
[expanded]="panelOpenState"
这仅实现“从 TS → HTML”的数据流，而 mat-expansion-panel 内部的展开/折叠操作（例如点击面板标题）会自行切换其内部状态，但不会反向更新你的 panelOpenState 变量。因此，即使你在 sideNavLink() 中设为 false，面板可能因内部状态未同步、或变更检测未触发而保持视觉展开。
✅ 正确做法是启用双向绑定：
[(expanded)]="panelOpenState"
该语法等价于：
[expanded]="panelOpenState" (expandedChange)="panelOpenState = $event"
它既将变量值传入组件，又监听 expandedChange 输出事件，自动同步外部变量，确保 panelOpenState 始终反映真实 UI 状态。
? 同时建议优化 sideNavLink() 逻辑，增强健壮性：
sideNavLink(event: Event): void {
const target = event.currentTarget as HTMLElement;
const anchorId = target.getAttribute('id');
// 显式关闭 User 面板（无论点击的是 Admin 还是其他非用户菜单）
if (anchorId !== 'userMgmtId') {
this.panelOpenState = false;
}
}
? 补充注意事项：
- 确保 panelOpenState: boolean 已在组件类中正确定义（如 panelOpenState = false;）；
- 若使用 OnPush 变更检测策略，双向绑定本身已通过 EventEmitter 触发检测，通常无需额外调用 ChangeDetectorRef.detectChanges()；
- 避免在模板中对同一 expanded 属性混用单向绑定和事件监听，否则易导致状态冲突。
通过 [(expanded)] 实现真双向同步，即可彻底解决点击 Admin 菜单后 User 子菜单不收起的问题。
