多个相同Angular Elements组件实例settings共享，如何实现状态独立互不影响

根因 #

你遇到的问题本质是多个组件持有了同一个settings对象的引用，修改任意一个实例的属性都会同步到所有引用该对象的组件，具体触发原因：
当isfullscreen为true时，你直接将全局对象window.myWidgetSettings赋值给settings，两个组件的settings字段指向同一个全局引用，即便你已经在组件级别声明了独立的MyWidgetService provider，也会因为引用共用导致状态同步。

修复方法 #

1. 全局settings赋值时做深拷贝 #

不要直接把全局window对象赋值给settings，拷贝出独立实例避免引用共享：

// ngOnInit 中修改原有赋值逻辑
// 原代码
this.settings = window['myWidgetSettings'];
// 替换为深拷贝，简单场景用JSON序列化方案，复杂对象可根据项目技术栈选用对应深拷贝工具
this.settings = JSON.parse(JSON.stringify(window['myWidgetSettings']));

2. 保留组件级service声明 #

你当前@Component配置里的providers: [MyWidgetService]是正确的，该配置可以保证每个my-widget组件实例都持有独立的service实例，不要将该provider声明移到模块级别即可。

3. 可选优化 #

你当前的isfullscreen输入为字符串类型，可改为布尔类型更符合Angular最佳实践：

// 原代码
@Input() isfullscreen: string = 'false';
// 修改为
@Input() isfullscreen: boolean = false;

对应cshtml传值调整为：

<my-widget [isfullscreen]="false"></my-widget>
<my-widget [isfullscreen]="true"></my-widget>

修改完成后每个组件的settings都是独立实例，修改单个组件的指示器状态不会影响其他组件。

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