在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等,你可以根据需要进行配置。