同一页面多个Angular Element实例 单个实例状态变更同步影响所有实例

跨组件实例同步变更的现象与传入的fullscreen入参无关联，本质是单例服务的全局状态被所有组件实例共享：

• Angular默认注入到应用根级的MyService是全局唯一的单例对象，整个应用运行周期内仅存在1个该服务实例。
• 两个MyWidgetComponent实例通过构造函数注入的是同一个服务，代码中的myModel getter直接返回this.myService.getModel()，拿到的是服务内部存储的同一个model对象的引用。
• 任意实例修改model数据，本质都是修改这个全局共享的对象，因此两个绑定了同一引用的模板都会同步刷新，不存在实例级的状态隔离。
• ngOnInit中调用的this.myService.initialize(this.fullscreen)，会被后初始化的实例覆盖掉服务存储的全局配置，两个组件从始至终读取服务内的同一份全局状态，从未为每个实例生成独立的model对象。

• 为每个组件实例生成独立的本地model，切断和服务内全局对象的引用关联。将服务返回的全局model拷贝后存储在组件自身的私有属性上，模板直接绑定组件本地的model即可，参考调整后的组件代码：

  export class MyWidgetComponent implements OnInit  {
      @Input() fullscreen: string;
      // 新增组件级独立的model存储
      private localModel: MyModel;
  
      get myModel(): MyModel {
          return this.localModel;
      }
  
      ngOnInit() {
          this.myService.initialize(this.fullscreen);
          const baseGlobalModel = this.myService.getModel();
          // 拷贝生成当前实例的独立model，避免共享全局对象引用
          this.localModel = {...baseGlobalModel};
      }
  
      constructor(private myService: MyService) {}
  }
  

• 如果需要保留服务统一初始化的能力，可以在服务内部维护以组件唯一标识为key的Map结构，为每个组件存储独立的model和配置，避免全局单份状态被共享。
• 如果组件之间完全不需要通过服务跨实例交互，可以在组件元数据中将MyService标记为组件级依赖，让每个组件实例都生成属于自己的服务副本，从根源上实现状态隔离：

  @Component({
    selector: 'my-widget',
    // 原有模板、样式等配置保持不变
    providers: [MyService] // 配置后每个组件实例都会获得独立的MyService实例，不再共享全局单例
  })
  

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