Angular中页面切换后如何保持mat-checkbox的选中状态？

你的代码使用了Angular CDK的SelectionModel管理选中状态，但页面切换（路由跳转或组件销毁重建）后，内存中的状态会丢失，以下是两种可行的解决思路：

方案一：本地存储持久化（支持页面刷新后保留） #

通过localStorage或sessionStorage保存选中项的唯一标识，组件初始化时读取并恢复状态：

组件代码修改 #

import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnInit } from '@angular/core';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit {
  selection = new SelectionModel<any>(true, []); // 允许多选
  elements: any[] = []; // 你的数据列表（假设每个元素有唯一id属性）

  ngOnInit(): void {
    // 读取本地存储中保存的选中ID
    const savedIds = localStorage.getItem('selectedElementIds');
    if (savedIds) {
      const ids = JSON.parse(savedIds);
      // 匹配当前数据列表中的项，恢复选中状态
      const matchedElements = this.elements.filter(el => ids.includes(el.id));
      this.selection.select(...matchedElements);
    }

    // 监听选中状态变化，自动保存到本地存储
    this.selection.changed.subscribe(() => {
      const selectedIds = this.selection.selected.map(el => el.id);
      localStorage.setItem('selectedElementIds', JSON.stringify(selectedIds));
    });
  }
}

模板代码无需修改 #

<mat-checkbox (click)="$event.stopPropagation()"
   (change)="$event ? selection.toggle(element) : null"
   [checked]="selection.isSelected(element)">
</mat-checkbox>

方案二：单例服务共享状态（适合路由切换，无需刷新页面保留） #

如果只需要在应用内路由切换时保持状态（不需要刷新页面后保留），可以用Angular单例服务存储SelectionModel：

1. 创建状态共享服务 #

import { Injectable } from '@angular/core';
import { SelectionModel } from '@angular/cdk/collections';

@Injectable({ providedIn: 'root' }) // 单例模式，全局共享
export class SelectionStateService {
  private readonly selection = new SelectionModel<any>(true, []);

  getSelection(): SelectionModel<any> {
    return this.selection;
  }

  // 同步选中状态（处理数据重新加载后的引用问题）
  syncSelection(currentElements: any[]): void {
    const savedSelected = this.selection.selected;
    const validElements = currentElements.filter(el => 
      savedSelected.some(saved => saved.id === el.id)
    );
    this.selection.clear();
    this.selection.select(...validElements);
  }
}

2. 组件中使用服务 #

import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnInit } from '@angular/core';
import { SelectionStateService } from './selection-state.service';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {
  selection: SelectionModel<any>;
  elements: any[] = []; // 你的数据列表

  constructor(private selectionService: SelectionStateService) {
    this.selection = this.selectionService.getSelection();
  }

  ngOnInit(): void {
    // 数据加载完成后同步选中状态（比如从API获取数据后）
    this.selectionService.syncSelection(this.elements);
  }
}

模板代码保持不变 #

<mat-checkbox (click)="$event.stopPropagation()"
   (change)="$event ? selection.toggle(element) : null"
   [checked]="selection.isSelected(element)">
</mat-checkbox>

注意事项 #

• 无论哪种方案，都要确保你的数据元素有唯一标识（如id），避免因对象引用变化导致选中状态匹配失败
• 若使用本地存储，注意localStorage是持久化存储（清除浏览器缓存才会删除），sessionStorage仅在当前会话有效
• 如果数据是动态从API获取的，一定要在数据加载完成后执行状态同步逻辑

内容的提问来源于stack exchange，提问作者A-C-3