为什么调用Angular Service方法时对应Component变量会自动更新

原因主要有3点： #

• Angular root级服务是单例：你给DataService配置了providedIn: 'root'，这意味着整个 Angular 应用全局只会创建一个该服务的实例，Component A 和 Component B 注入的是完全相同的服务对象，服务内部的employees数组是两个组件共享的数据源。
• 你传递的是数组引用而非副本：getEmployees方法里用of(this.employees)返回 observable，这里发出的值是服务中employees数组的内存引用，不是深/浅拷贝出来的新数组。所以 Component A 里执行this.allEmployees = response的时候，本质是让组件内的allEmployees变量直接指向了服务中的那同一个数组对象，两者从始至终操作的是同一份数据。
• push方法是原数组修改：调用addEmployee时用的push是数组的原地修改方法，不会生成新的数组实例，只是给原数组新增了元素。因为allEmployees和服务的employees指向同一个数组，自然会同步看到更新后的内容。

如果不想要这种同步效果，可以在返回数组的时候做浅拷贝，修改getEmployees的返回逻辑即可：

getEmployees(){
  // 展开运算符生成新数组，切断引用关联
  return of([...this.employees]);
}

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