可以通过使用编程式导航和查询参数对象来解决这个问题。
在组件中,使用以下代码来导航到具有查询参数的 URL:
import { Router } from '@angular/router';
export class MyComponent {
constructor(private router: Router) { }
goToPageWithQueryParams() {
const queryParams = { key1: 'value1', key2: 'value2' };
this.router.navigate(['/page-url'], { queryParams });
}
}
然后,可以使用以下代码来获取查询参数:
import { ActivatedRoute } from '@angular/router';
export class MyComponent {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
const key1Value = params['key1'];
const key2Value = params['key2'];
console.log(key1Value, key2Value);
});
}
}
使用上述代码示例,您可以在Angular 11中使用查询参数。