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

在Angular中，route.queryParamMap和route.paramMap是用于获取路由参数的两个Observable对象。当我们在这两个对象上订阅时，会导致两次页面加载的问题。

这个问题的原因是，当我们订阅这两个Observable对象时，Angular会立即执行一次路由参数的获取操作，然后在路由参数发生变化时再次执行一次。这就导致了两次页面加载的现象。

为了解决这个问题，我们可以使用rxjs中的操作符take(1)来限制只获取一次路由参数。这样就可以避免多次页面加载的问题。具体代码如下：

import { ActivatedRoute } from '@angular/router';
import { take } from 'rxjs/operators';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParamMap.pipe(take(1)).subscribe(params => {
    // 处理路由参数
  });

  this.route.paramMap.pipe(take(1)).subscribe(params => {
    // 处理路由参数
  });
}

在上面的代码中，我们使用了pipe操作符来应用take(1)操作符，这样就只会获取一次路由参数。在订阅之后，take(1)会自动取消订阅，避免了多次页面加载的问题。

需要注意的是，这种解决方案适用于大多数情况下。但如果你的业务需求需要在路由参数变化时执行一些特定操作，那么你可能需要根据具体情况来决定是否使用take(1)操作符。

总结起来，订阅route.queryParamMap和route.paramMap会导致两次页面加载的问题，可以通过使用take(1)操作符来限制只获取一次路由参数，从而避免这个问题的发生。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。产品介绍链接
• 腾讯云云数据库MySQL版：高性能、可扩展的关系型数据库服务。产品介绍链接
• 腾讯云对象存储（COS）：安全、稳定、低成本的云端存储服务。产品介绍链接
• 腾讯云人工智能：提供丰富的人工智能服务，如图像识别、语音识别等。产品介绍链接
• 腾讯云物联网套件：提供全面的物联网解决方案，帮助连接和管理物联网设备。产品介绍链接
• 腾讯云移动推送：提供高效、稳定的移动消息推送服务。产品介绍链接
• 腾讯云区块链服务：提供安全、高效的区块链解决方案。产品介绍链接
• 腾讯云视频处理服务：提供视频处理、转码、截图等功能。产品介绍链接
• 腾讯云音视频通信（TRTC）：提供实时音视频通信能力，支持多种场景。产品介绍链接
• 腾讯云云原生应用引擎（TKE）：提供高度可扩展的容器化应用管理平台。产品介绍链接