在Angular 9中,你可以使用NavigationExtras
的queryParamsHandling
属性来解决将额外字符添加到路由URL中的问题。
首先,确保你已经导入了Router
和NavigationExtras
:
import { Router, NavigationExtras } from '@angular/router';
然后,在需要导航到具有查询参数的URL的组件中,你可以使用以下代码示例来实现:
constructor(private router: Router) { }
navigateToURLWithQueryParams() {
const queryParams: any = {
param1: 'value1',
param2: 'value2'
};
const navigationExtras: NavigationExtras = {
queryParamsHandling: 'merge',
queryParams: queryParams
};
this.router.navigate(['/your-route'], navigationExtras);
}
在上面的代码中,我们首先定义了一个queryParams
对象,它包含了要传递的查询参数和对应的值。
然后,我们使用NavigationExtras
对象来配置导航行为。queryParamsHandling
属性设置为merge
,这将合并新的查询参数与现有的查询参数,而不是替换它们。queryParams
属性设置为我们之前定义的queryParams
对象。
最后,我们调用router.navigate
方法来导航到包含查询参数的URL。['/your-route']
是你要导航到的路由路径。
这样,当你调用navigateToURLWithQueryParams
方法时,Angular将导航到带有查询参数的URL,而不会添加额外的字符到URL中。