在Angular 2中,可以使用Router
服务来实现在路由中附加带有现有参数的queryParam
。以下是一种实现方式:
Router
服务和其他必要的依赖项。import { Router, ActivatedRoute } from '@angular/router';
Router
和ActivatedRoute
。constructor(private router: Router, private route: ActivatedRoute) { }
queryParam
的地方,使用queryParams
属性来获取当前路由的参数,并将其与现有参数合并。addQueryParam() {
// 获取当前路由的参数
const queryParams = { ...this.route.snapshot.queryParams };
// 合并现有参数和新参数
queryParams['newParam'] = 'value';
// 导航到带有附加参数的新路由
this.router.navigate([], { queryParams: queryParams });
}
在上面的代码中,我们首先使用this.route.snapshot.queryParams
获取当前路由的参数。然后,我们使用扩展运算符(...
)将现有参数复制到新的对象中。接下来,我们将新的参数添加到新对象中。最后,我们使用this.router.navigate
方法导航到带有附加参数的新路由。
这样,当调用addQueryParam
方法时,将会导航到带有附加参数的新路由。
请注意,以上代码仅适用于在同一个组件中导航到带有附加参数的新路由。如果你需要在不同组件之间导航并传递参数,你可以使用queryParamsHandling
选项来处理参数的传递。
这是一个示例链接,展示了如何使用Angular的路由和queryParam
:Angular Router - Query Parameters
领取专属 10元无门槛券
手把手带您无忧上云