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

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

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');
  }
}

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