在route.queryParamMap和route.paramMap上订阅会导致两次页面加载

在Angular框架中，route.queryParamMap和route.paramMap分别用于获取URL中的查询参数和路由参数。当你在组件中订阅这两个流时，可能会遇到页面加载两次的情况。这通常是由于Angular的变更检测机制和路由事件的触发方式导致的。

基础概念

• route.queryParamMap: 这是一个Observable对象，它包含了当前激活路由的查询参数。查询参数是URL中?后面的键值对。
• route.paramMap: 这也是一个Observable对象，它包含了当前激活路由的路由参数。路由参数是路由路径中定义的动态段。

为什么会出现两次页面加载？

1. 首次加载: 当路由首次匹配并激活组件时，Angular会触发变更检测，此时route.queryParamMap和route.paramMap都会发出最新的值。
2. 路由事件触发: 如果在组件初始化时订阅了这些流，并且在订阅处理函数中触发了某些可能导致路由重新激活的操作（例如，通过router.navigate或router.navigateByUrl导航到相同的路由），这将再次触发变更检测，导致页面看起来像是加载了两次。

解决方法

为了避免这种情况，可以采取以下措施：

1. 使用take(1)操作符: 这样可以确保只接收一次数据流，避免重复订阅。
2. 使用take(1)操作符: 这样可以确保只接收一次数据流，避免重复订阅。
3. 使用first()操作符: 类似于take(1)，first()也会自动取消订阅。
4. 避免在订阅中触发路由变化: 确保在处理查询参数和路由参数的逻辑中不会无意中导致路由的重新激活。
5. 使用ActivatedRouteSnapshot: 在路由守卫或者组件初始化时，可以直接从ActivatedRouteSnapshot中读取参数，而不是订阅流。
6. 使用ActivatedRouteSnapshot: 在路由守卫或者组件初始化时，可以直接从ActivatedRouteSnapshot中读取参数，而不是订阅流。

通过上述方法，可以有效避免因订阅route.queryParamMap和route.paramMap而导致的页面加载两次的问题。