为何Angular组件属性会被服务中定时器自动更新？

这本质是Angular服务的单例特性和引用类型传递共同作用的结果，具体拆解如下：

• 服务是单例对象：Angular中默认通过providedIn: 'root'注册的服务是单例模式，整个应用里只会存在一个myService实例，所有组件注入的都是同一个服务对象。
• 引用传递而非值拷贝：当你在ngOnInit里调用myService.getParameters()时，如果这个方法返回的是包含currentTime的对象（或者直接返回currentTime本身），组件拿到的是对象的引用，而不是属性值的副本。
• 变更检测自动感知变化：服务里的定时器每秒更新currentTime属性，其实是在修改这个单例服务对象的属性值。由于组件绑定的是同一个引用指向的对象，Angular的变更检测机制会自动捕捉到属性变化，进而更新页面上的<span>内容。

举个直观的代码示例：

服务代码 #

@Injectable({ providedIn: 'root' })
export class MyService {
  currentTime = new Date();

  constructor() {
    // 每秒更新currentTime属性
    setInterval(() => {
      this.currentTime = new Date();
    }, 1000);
  }

  getParameters() {
    // 返回包含currentTime的对象，传递的是引用
    return { currentTime: this.currentTime };
  }
}

组件代码 #

@Component({
  template: '<span>{{ params.currentTime }}</span>'
})
export class MainComponent implements OnInit {
  params: { currentTime: Date };

  constructor(private myService: MyService) {}

  ngOnInit() {
    // 仅调用一次，但拿到的是服务对象的引用
    this.params = this.myService.getParameters();
  }
}

如果想要避免这种自动更新，你需要在服务方法里返回值的副本，比如：

getParameters() {
  // 返回新的对象，和服务的currentTime切断引用
  return { currentTime: new Date(this.currentTime.getTime()) };
}

这样组件拿到的是独立的对象，服务后续更新currentTime不会影响组件的属性值。

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