Angular中Service与Component通信：修改Service数组为何同步更新Component数据

问题核心原因：引用类型的赋值特性 #

这是JavaScript的基础特性导致的，和Angular框架本身无关：

• JavaScript中数组、普通对象都属于引用类型，对这类变量赋值时，不会完整拷贝整个对象/数组的内容，只会传递它在内存中的存储地址。

你执行this.devices = this.deviceService.devices时，并没有在组件内生成一份独立的设备列表副本，只是让组件的this.devices变量和Service里的devices变量指向了内存中同一个数组对象，相当于给同一个数组起了两个不同的别名。

后续你在Service的switchOnAll、switchOffAll方法中，修改的是这个公共数组内部每个设备对象的status属性，没有更换数组本身的内存地址，所以不管是从组件的this.devices还是Service的devices访问，拿到的都是最新的修改后的值，页面自然会同步更新。

你可以通过以下代码验证两者的关联性：

ngOnInit() {
    this.devices = this.deviceService.devices;
    // 打印结果为true，说明两个变量指向同一个对象
    console.log(this.devices === this.deviceService.devices);
}

额外补充

如果后续你在Service中直接给devices重新赋值（比如this.devices = []清空列表），这时候组件的this.devices不会自动同步，因为此时Service的devices已经指向了新的数组地址，和组件里的变量不再指向同一个对象。如果需要这种场景下也同步，就需要用RxJS的Subject这类响应式对象来封装数据了。

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