Angular CDK对话框打开导致新加载页面查询参数丢失

问题分析 #

CDK对话框是挂载到body下的独立容器，不属于当前路由组件的组件树，默认不会继承路由上下文。你遇到的查询参数消失，大概率是打开对话框时，代码中存在隐式的路由操作（比如误调用了router.navigate却没携带参数），或者对话框内的路由逻辑没有处理查询参数的保留。

解决方案 #

• 打开对话框时主动传递查询参数
  在触发对话框的组件中，通过ActivatedRoute获取当前查询参数，将其传入对话框，后续任何需要路由操作的地方都显式携带这些参数：

  import { Component } from '@angular/core';
  import { MatDialog } from '@angular/material/dialog';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-target-page',
    template: '<button (click)="openDialog()">打开对话框</button>'
  })
  export class TargetPageComponent {
    constructor(
      private dialog: MatDialog,
      private route: ActivatedRoute
    ) {}
  
    openDialog() {
      // 获取当前路由的查询参数快照
      const queryParams = this.route.snapshot.queryParams;
      // 传递参数到对话框
      this.dialog.open(YourDialogComponent, {
        data: { queryParams }
      });
    }
  }
  

• 对话框内路由操作保留参数
  如果对话框里有路由跳转逻辑，必须添加queryParamsHandling配置来保留或合并现有参数：

  // 对话框组件内的路由操作示例
  this.router.navigate([], {
    queryParamsHandling: 'preserve', // 保留现有查询参数
    // 或者用 'merge' 来合并新参数和现有参数
  });
  

• 排查隐式路由触发点
  检查对话框模板和逻辑，是否存在<a>标签未用routerLink、按钮点击事件误触发路由跳转的情况，这类操作如果没指定查询参数，会导致URL被重置。

补充说明 #

ActivatedRoute的属性只读是设计如此，我们不需要修改它，只需要通过快照或订阅的方式获取参数，再在需要的地方显式传递即可。

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