Angular 9+中如何让共享组件每个实例保持独立状态？

以下是几种直接有效的解决方案，针对你遇到的“所有组件实例共享状态”问题：

• 移除静态变量定义
  如果你在组件类中将状态变量标记为static，这会导致所有组件实例共享同一个变量内存地址。直接去掉static关键字，让每个实例拥有独立的变量副本：
  错误写法：

  export class TreeNodeComponent {
    static nodeName: string; // 所有实例共享该变量
    // 其他逻辑
  }
  

  正确写法：

  export class TreeNodeComponent {
    nodeName: string; // 每个实例独立持有
    // 其他逻辑
  }
  

• 传递独立的数据对象副本
  如果父组件给所有子节点传递的是同一个对象引用，双向绑定修改时会同步影响所有引用该对象的组件。给每个节点传递独立的对象副本即可解决：
  在父组件模板中直接创建副本：

  <app-tree-node [(nodeData)]="{...currentNode}"></app-tree-node>
  

  或者在父组件逻辑中提前生成副本：

  addNewTreeNode() {
    // 基于默认节点创建独立副本
    const newNode = Object.assign({}, this.defaultTreeNode);
    this.treeNodes.push(newNode);
  }
  

• 隔离共享服务中的状态（如果用到了共享服务）
  若你的组件依赖全局共享服务维护状态，要为每个实例创建独立的状态存储。可以用Map按实例ID区分状态：
  共享服务代码：

  @Injectable({providedIn: 'root'})
  export class TreeNodeService {
    private instanceStates = new Map<string, any>();
  
    getInstanceState(instanceId: string): any {
      return this.instanceStates.get(instanceId) || {};
    }
  
    setInstanceState(instanceId: string, state: any): void {
      this.instanceStates.set(instanceId, state);
    }
  }
  

  组件中使用：

  export class TreeNodeComponent implements OnInit, OnDestroy {
    private instanceId = Math.random().toString(36).slice(2);
    private localState: any;
  
    constructor(private nodeService: TreeNodeService) {}
  
    ngOnInit(): void {
      // 初始化时获取或创建独立状态
      this.localState = {...this.nodeService.getInstanceState(this.instanceId)};
    }
  
    ngOnDestroy(): void {
      // 销毁时保存状态（如果需要）
      this.nodeService.setInstanceState(this.instanceId, this.localState);
    }
  }
  

• 验证组件输入的引用独立性
  检查所有双向绑定的输入属性，确保每个组件实例接收到的是不同的对象引用——引用相同的话，修改一个实例的属性会同步到所有引用该对象的实例。

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