Angular中HttpClient Observable重复触发问题原因咨询

问题背景 #

通过带id的URL访问Angular商品详情页（比如http://myFrontend/productDetails/10），用ActivatedRoute拿到id后，再通过HttpClient请求后端数据，代码如下：

this.route.params.pipe(map(params => params.id)).subscribe(id => {
   const params = new HttpParams().set('id', id);
   this.httpClient.get<Product>('http://myBackend/product/', {params})
      .subscribe(product => this.product = product);
});

当从id=10的页面跳转到id=11的同路由页面时，原本请求id=10的HTTP请求回调依然会执行，导致两个请求的结果都往this.product变量里写入，引发竞态条件。已知用取消订阅或take(1)能解决，但想了解具体触发原因。

触发原因 #

1. Angular默认复用同组件路由实例 #

当导航到同一个组件类但路由参数不同的路径时，Angular不会销毁当前组件再重新创建，而是直接复用现有实例。这意味着你对ActivatedRoute.params的订阅会一直保持活跃状态，不会随着路由参数变化自动取消，每次参数更新都会触发订阅回调。

2. 旧HTTP请求的订阅未被清理 #

每次params发出新id时，你都会新建一个HttpClient.get的订阅，但之前的HTTP请求订阅没有被主动取消。如果id=10的请求还在等待后端响应时，用户切换到了id=11，此时会发起id=11的请求。当id=10的请求最终返回时，它的订阅回调依然会执行，把旧商品数据赋值给this.product——如果此时id=11的请求已经返回并更新了变量，就会被旧数据覆盖，这就是竞态条件的由来。

注：你提到的“原本请求id=10的Observable再次触发”，实际是旧请求的订阅未被取消，请求完成后回调依然会执行，并非重复发起了id=10的请求。

内容的提问来源于stack exchange，提问作者Mr.H.