在页面刷新时保持mat-expansion面板的"expanded“状态

在页面刷新时保持mat-expansion面板的"expanded"状态，可以通过以下步骤实现：

首先，确保你已经使用Angular框架和Angular Material组件库搭建了你的前端应用。
在组件的HTML模板中，使用mat-accordion组件包裹你的mat-expansion-panel，创建一个可折叠面板的容器。

<mat-accordion>
  <mat-expansion-panel [expanded]="isExpanded">
    <!-- 面板的内容 -->
  </mat-expansion-panel>
</mat-accordion>

在组件的TypeScript文件中，定义一个变量来存储面板的展开状态。你可以使用Angular的本地存储服务（localStorage）来保存该状态，以在页面刷新时保持状态。

import { Component, OnInit } from '@angular/core';
import { MatExpansionPanel } from '@angular/material/expansion';
import { StorageService } from 'your-storage-service-path'; // 导入本地存储服务

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css']
})
export class YourComponent implements OnInit {
  isExpanded: boolean;

  constructor(private storageService: StorageService) {}

  ngOnInit(): void {
    this.isExpanded = this.storageService.getItem('panelState') === 'expanded';
  }

  togglePanelState(panel: MatExpansionPanel): void {
    this.isExpanded = panel.expanded;

    // 在状态改变时，将面板展开状态保存到本地存储
    this.storageService.setItem('panelState', this.isExpanded ? 'expanded' : 'collapsed');
  }
}

在组件的HTML模板中，绑定面板的展开状态到定义的变量，并在展开状态发生变化时调用togglePanelState方法。

<mat-accordion>
  <mat-expansion-panel [expanded]="isExpanded" (opened)="togglePanelState($event.panel)" (closed)="togglePanelState($event.panel)">
    <!-- 面板的内容 -->
  </mat-expansion-panel>
</mat-accordion>

通过以上步骤，你可以实现在页面刷新时保持mat-expansion面板的"expanded"状态。在每次展开或折叠面板时，会将面板的展开状态保存到本地存储，并在页面刷新时重新加载状态。这样，用户在页面刷新后仍然可以看到之前展开的面板。