mat-expansion-panel的[expanded]和(opened)有什么区别？触发时序是否一致？

核心属性与事件的本质差异 #

• [expanded] 是输入绑定属性，属于状态值，用于主动控制面板的展开/收起状态，支持双向绑定写法 [(expanded)] 同步当前状态。你可以通过修改该属性的布尔值直接变更面板状态，也可以直接读取它的取值判断面板当前是否处于展开状态。
• (opened) 是输出事件，属于状态变化的回调触发器，本身无法控制面板状态，只会在「面板完成从收起到展开的动画过渡」之后触发一次，通常用于监听展开完成的时机执行后续逻辑，比如展开后加载异步数据、调整页面滚动位置等。

关于expanded状态是否触发(opened)事件的说明 #

只有面板发生「从收起状态切换到展开状态」的动作时，才会触发(opened)事件。如果面板初始化时就设置为展开状态、或者已经处于展开状态没有发生状态切换，不会触发(opened)事件。

举个常见的开发场景示例：

<!-- 初始化就展开面板的写法 -->
<mat-expansion-panel [expanded]="isExpanded" (opened)="fetchPanelData()">
  <!-- 面板内容 -->
</mat-expansion-panel>

如果初始化时isExpanded赋值为true，页面加载完成后面板默认展开，但fetchPanelData()不会执行，因为没有发生状态切换动作。如果需要初始化展开时也执行对应逻辑，需要在组件初始化生命周期中主动调用一次该方法。

另外注意两者的触发时机也有差异：[expanded] 绑定的状态值会在面板展开动画开始时就同步变更，而(opened)事件会在展开动画完全结束后才触发。

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