Angular中ActivatedRoute.queryParams更新后重复触发问题

为什么fetch会被调用4次？ #

这是多个因素叠加导致的：

1. BehaviorSubject的初始发射特性：route.queryParams本质是BehaviorSubject，组件初始化订阅它时，会先把当前已存在的queryParams（页面加载时的hash）发射一次，这是第一次触发fetch。
2. 路由更新的多次发射：调用setQueryParams更新hash时，Angular路由系统在处理导航的过程中，会多次触发queryParams发射——包括导航开始时的参数变化、导航完成后的最终参数状态，甚至可能存在路由状态同步的中间发射。
3. 无终止的循环触发：初始fetch完成后更新hash，hash变化又会触发queryParams的新发射，再次进入fetch逻辑，形成了没有终止条件的循环，直到路由状态稳定，最终导致多次调用。

为什么添加first()就能解决问题？ #

first()操作符会仅取第一个满足filter条件的queryParams值，之后自动完成订阅并取消监听。这样初始的hash处理完成后，订阅就被切断了，后续hash更新引发的queryParams发射不会再触发fetch，自然就只执行一次。

queryParams的发射何时终止？ #

route.queryParams本身不会自动终止发射：

• 只要路由的queryParams发生变化（比如代码更新、手动修改URL、浏览器前进后退），它就会持续发射新的参数值。
• 只有当组件被Angular销毁（比如路由跳转到其他页面），或者你手动取消订阅（比如用first()、takeUntil、调用订阅对象的unsubscribe()方法）时，订阅才会停止，不再接收新的发射值。

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