Javascript Angular 5 删除查询参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48552993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 remove query param
提问by Nazar Kalytiuk
How to remove query param from URL. For example from www.expample.com/home?id=123&pos=sd&sd=iiimake www.expample.com/home?id=123&sd=iii
如何从 URL 中删除查询参数。例如从www.expample.com/home?id=123&pos=sd&sd=iiimakewww.expample.com/home?id=123&sd=iii
EDIT: My version
编辑：我的版本
this.activatedRoute.queryParams.subscribe(c => {
const params = Object.assign({}, c);
delete params.dapp;
this.router.navigate([], { relativeTo: this.activatedRoute, queryParams: params });
}).unsubscribe();
采纳答案by vince
UPDATE:@epelc's answer below is the up-to-date and correct way to do this: https://stackoverflow.com/a/52193044/5932590.
更新：@epelc 下面的回答是最新且正确的方法：https ://stackoverflow.com/a/52193044/5932590 。
Unfortunately, there is no clear-cut way to do this currently: https://github.com/angular/angular/issues/18011. However, as jasonaden commented on the linked thread,
不幸的是，目前没有明确的方法可以做到这一点：https: //github.com/angular/angular/issues/18011。然而，正如 jasonaden 对链接线程的评论，
This could be done manually by merging the old and new query params, removing the key you don't want.
这可以通过合并新旧查询参数手动完成，删除您不想要的键。
Here is one way to do that:
这是一种方法：
Let's say you have your queryParams stored in some properties.
假设您将 queryParams 存储在某些属性中。
class MyComponent() {
id: string;
pos: string;
sd: string;
constructor(private route: ActivatedRoute, private router: Router) {}
ngOnInit() {
this.route.url.subscribe(next => {
const paramMap = next.queryParamMap;
this.id = paramMap.get('id');
this.pos = paramMap.get('pos');
this.sd = paramMap.get('sd');
});
}
}
A method to clear the posparameter would look like this:
清除pos参数的方法如下所示：
clearPosParam() {
this.router.navigate(
['.'],
{ relativeTo: this.route, queryParams: { id: this.id, sd: this.sd } }
);
}
This will effectively navigate to the current route and clear your posquery parameter, keeping your other query parameters the same.
这将有效地导航到当前路线并清除您的pos查询参数，使您的其他查询参数保持不变。
回答by epelc
You can remove a query parameter by using the mergeoption of queryParamsHandlingand passing in nullfor any params you wish to remove.
您可以使用删除查询参数merge的选项，queryParamsHandling并通过在null任何PARAMS你想删除。
// Remove query params
this.router.navigate([], {
queryParams: {
yourParamName: null,
youCanRemoveMultiple: null,
},
queryParamsHandling: 'merge'
})
This option is simpler and requires less work to ensure you are not removing other params. You also do not need to worry about cleaning up an observable subscription when your component is destroyed.
此选项更简单，需要更少的工作来确保您不会删除其他参数。当您的组件被销毁时，您也无需担心清理可观察订阅。
回答by Mohammad Hassani
This is the best sulotion that i found, you can change url parameters
这是我找到的最好的 solotion，您可以更改 url 参数
in constructor use
在构造函数中使用
private _ActivatedRoute: ActivatedRoute
then use this in init or in constructor body
然后在 init 或构造函数体中使用它
var snapshot = this._ActivatedRoute.snapshot;
const params = { ...snapshot.queryParams };
delete params.pos
this.router.navigate([], { queryParams: params });
