本文讲解 Angular 中 mat-expansion-panel 的 expanded 属性为何单向绑定（[expanded]）无法响应式关闭面板，以及如何通过双向绑定（[(expanded)]）正确控制展开状态。
本文讲解 angular 中 `mat-expansion-panel` 的 `expanded` 属性为何单向绑定（`[expanded]`）无法响应式关闭面板，以及如何通过双向绑定（`[(expanded)]`）正确控制展开状态。
在 Angular Material 中，
例如，当用户点击面板标题展开后，mat-expansion-panel 内部会将自身状态设为 true；此时即使你在其他地方（如点击“Admin”菜单）执行 this.panelOpenState = false，由于缺少事件监听机制，面板不会自动响应——因为单向绑定不监听组件自身的 expandedChange 输出事件。
✅ 正确解法是使用双向绑定语法 [(expanded)]，它等价于：
[expanded]="panelOpenState" (expandedChange)="panelOpenState = $event"
该语法同时订阅了面板的 expandedChange 事件，确保：
- 组件类变量 panelOpenState 的更新能驱动面板状态；
- 用户交互（点击标题）触发的状态变更也能反向同步至 panelOpenState，从而保证状态一致性。
修改后的模板代码如下：
<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>对应组件类中保持原有逻辑即可（无需改动）：
export class NavigationComponent {
panelOpenState = false;
sideNavLink(event: Event): void {
const anchorId = (event.currentTarget as HTMLElement).getAttribute('id');
// 点击非 userMgmtId 元素时，强制收起面板
if (anchorId !== 'userMgmtId') {
this.panelOpenState = false;
}
}
}⚠️ 注意事项：
- 若项目中存在多个 mat-expansion-panel，请为每个面板声明独立的状态变量（如 userPanelOpen = false、adminPanelOpen = false），避免状态耦合；
- [(expanded)] 要求绑定的变量必须是可写属性（不能是 const 或只读 readonly）；
- 在 OnPush 变更检测策略下，确保 panelOpenState 更新触发视图检查（双向绑定本身已处理，通常无需额外调用 markForCheck()）。
总结：[expanded] 仅负责“推”状态，[(expanded)] 则实现“推+拉”闭环。对于需要外部控制 + 用户交互协同管理的场景，务必使用双向绑定，这是 Angular 响应式 UI 开发的关键实践之一。
