在打开对话框时,手动保存当前查询参数并将其添加到对话框URL中,以便在关闭对话框时重新加载原始页面时恢复查询参数。
示例代码:
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { MatDialog } from '@angular/material/dialog'; import { MyDialogComponent } from './my-dialog/my-dialog.component';
@Component({ selector: 'app-my-page', templateUrl: './my-page.component.html', styleUrls: ['./my-page.component.css'] }) export class MyPageComponent implements OnInit {
constructor(private route: ActivatedRoute, private router: Router, private dialog: MatDialog) { }
ngOnInit() { this.route.queryParams.subscribe(params => { // Do something with the query params }); }
openDialog() { // Save current query params const queryParams = { ...this.route.snapshot.queryParams };
// Open the dialog with updated URL including query params
const dialogRef = this.dialog.open(MyDialogComponent, {
width: '400px',
data: {},
// Append current query params to dialog URL
queryParams: queryParams
});
dialogRef.afterClosed().subscribe(result => {
// Reload page with original query params
this.router.navigate([], {
relativeTo: this.route,
queryParams: queryParams
});
});
}
}