在Angular 6中,可以使用NavigationExtras
中的queryParamsHandling
属性来解决路径在查询字符串之后被追加的问题。
首先,导入Router
和NavigationExtras
:
import { Router, NavigationExtras } from '@angular/router';
然后,在需要导航到新路径的地方,使用NavigationExtras
对象来指定queryParamsHandling
属性的值为preserve
。此属性指示Angular保留原始的查询字符串并将其附加到新路径中。
// 在组件中注入Router
constructor(private router: Router) {}
// 导航到新路径
navigateToNewPath() {
const queryParams = { id: 123 };
// 使用NavigationExtras对象指定queryParamsHandling属性为preserve
const navigationExtras: NavigationExtras = {
queryParams,
queryParamsHandling: 'preserve'
}
// 导航到新路径
this.router.navigate(['/new-path'], navigationExtras);
}
上面的示例中,queryParams
对象包含要传递给新路径的查询参数。然后,将queryParamsHandling
属性设置为preserve
,告诉Angular保留原始的查询字符串。
当导航到新路径时,Angular将在新路径的查询字符串之后追加原始查询字符串。
请注意,NavigationExtras
对象还包含其他属性,例如fragment
、preserveFragment
等,你可以根据需要进行配置。