在打开对话框之前,使用Angular的Location一些API附加查询参数。例如,可以使用以下代码:
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
constructor(
private dialog: MatDialog,
private router: Router,
private route: ActivatedRoute
) {}
openDialog(): void {
// 获取当前查询参数
let queryParams = this.route.snapshot.queryParams;
// 打开对话框之前将当前查询参数附加到URL中
this.router.navigate([], {
relativeTo: this.route,
queryParams: queryParams,
queryParamsHandling: 'merge'
});
// 打开对话框
const dialogRef = this.dialog.open(YourDialogComponent, {
width: '250px'
});
}
}
这将在打开对话框之前将当前查询参数附加到URL中,并使用“merge”选项将它们与现有查询参数合并。这样,即使在加载对话框期间页面重新加载,查询参数也会被保留。