双向绑定共享数据跨页操作互扰：如何实现隔离且不影响表格排序？

问题本质 #

• 多页面表格联动：所有表格直接绑定了全局唯一的ContextManager.allSkills引用，任意页面的筛选/排序操作都是直接修改这个全局Map实例，所有引用它的组件自然会同步更新
• 拷贝后排序失效：之前的拷贝操作没有正确处理Map类型和自定义Skill类的深拷贝，或者修改拷贝后的数据没有触发Angular变更检测，导致表格视图没有更新

最简解决方案 #

你提到的Injector方案完全不需要，按以下三步操作即可，实现成本极低：

1. 每个组件初始化时生成独立的数据源深拷贝 #

不要直接使用全局Map的引用，要对Map和内部的Skill实例做完整拷贝，避免操作时影响全局数据：

// 组件内部私有数据源，仅当前组件可访问
private localSkillMap: Map<number, Skill> = new Map();
// 绑定到表格的数据源（大部分表格组件要求数组输入）
public tableDataSource: Skill[] = [];

ngOnInit() {
  // 遍历全局Map生成独立副本
  ContextManager.allSkills.forEach((skill, id) => {
    // 按你的Skill类构造规则生成新实例，若Skill内部有引用类型属性，同步做深拷贝
    this.localSkillMap.set(id, new Skill({...skill}));
  });
  this.tableDataSource = Array.from(this.localSkillMap.values());
}

2. 所有表格操作仅操作组件内部私有数据源 #

所有筛选、排序逻辑都只修改localSkillMap和tableDataSource，绝对不要直接修改ContextManager.allSkills的任何属性和值，自然不会影响其他页面的表格。

3. 修复排序后视图不更新问题 #

如果修改完内部数据源表格没有刷新，按需二选一处理即可：

• 若使用Angular Material表格，修改数据源后调用this.tableDataSource._updateChangeSubscription()手动触发表格更新
• 通用场景直接注入ChangeDetectorRef手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

// 每次完成排序/筛选操作后调用
this.cdr.markForCheck();

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