我试图更新(添加，删除)queryParams从一个组件。在angularJS中，它曾经是可能的，这要归功于:
$location.search('f', 'filters[]'); // setter
$location.search()['filters[]']; // getter
我有一个应用程序的列表，用户可以过滤，顺序等，我想设置在url的queryParams所有过滤器激活，这样他就可以复制/粘贴url或与他人共享。
但是，我不希望每次选择筛选器时都重新加载页面。
新路由器能做到吗?
当前回答
您可以使用新的查询参数导航到当前路由，这不会重新加载页面，但会更新查询参数。
类似于(在组件中):
import {ActivatedRoute, Router} from '@angular/router';
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
) { }
public myMethodChangingQueryParams() {
const queryParams: Params = { myParam: 'myNewValue' };
this.router.navigate(
[],
{
relativeTo: activatedRoute,
queryParams: queryParams,
queryParamsHandling: 'merge', // remove to replace all query params by provided
});
}
注意，虽然它不会重新加载页面，但它会将一个新条目推送到浏览器的历史记录中。如果你想在历史记录中替换它，而不是在那里添加新的值，你可以使用{queryParams: queryParams, replaceUrl: true}。
编辑: 正如评论中已经指出的，[]和relativeTo属性在我最初的示例中缺失，因此它也可以更改路由，而不仅仅是查询参数。正确的this.router.navigate用法如下:
this.router.navigate(
[],
{
relativeTo: this.activatedRoute,
queryParams: { myParam: 'myNewValue' },
queryParamsHandling: 'merge'
});
将新的参数值设置为null将从URL中删除参数。
其他回答
您可以使用新的查询参数导航到当前路由，这不会重新加载页面，但会更新查询参数。
类似于(在组件中):
import {ActivatedRoute, Router} from '@angular/router';
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
) { }
public myMethodChangingQueryParams() {
const queryParams: Params = { myParam: 'myNewValue' };
this.router.navigate(
[],
{
relativeTo: activatedRoute,
queryParams: queryParams,
queryParamsHandling: 'merge', // remove to replace all query params by provided
});
}
注意，虽然它不会重新加载页面，但它会将一个新条目推送到浏览器的历史记录中。如果你想在历史记录中替换它，而不是在那里添加新的值，你可以使用{queryParams: queryParams, replaceUrl: true}。
编辑: 正如评论中已经指出的，[]和relativeTo属性在我最初的示例中缺失，因此它也可以更改路由，而不仅仅是查询参数。正确的this.router.navigate用法如下:
this.router.navigate(
[],
{
relativeTo: this.activatedRoute,
queryParams: { myParam: 'myNewValue' },
queryParamsHandling: 'merge'
});
将新的参数值设置为null将从URL中删除参数。
在Angular 5中，你可以通过解析当前url来轻松获取和修改urlTree的副本。这将包括查询参数和片段。
let urlTree = this.router.parseUrl(this.router.url);
urlTree.queryParams['newParamKey'] = 'newValue';
this.router.navigateByUrl(urlTree);
修改查询参数的“正确方法”可能是使用 创建一个新的UrlTree从当前，同时让我们修改它使用NavigationExtras。
import { Router } from '@angular/router';
constructor(private router: Router) { }
appendAQueryParam() {
const urlTree = this.router.createUrlTree([], {
queryParams: { newParamKey: 'newValue' },
queryParamsHandling: "merge",
preserveFragment: true });
this.router.navigateByUrl(urlTree);
}
为了以这种方式删除查询参数，可以将其设置为undefined或null。
更好的是-只有HTML:
<a [routerLink]="
注意，数组是空的，而不是只做routerLink=""或[routerLink]=" "" "
如果你想改变查询参数而不改变路由。见下文 下面的例子可能对你有帮助: 当前路由为:/search &目标路由是(没有重载页面):/search?查询=爱
submit(value: string) {
this.router.navigate( ['.'], { queryParams: { query: value } })
.then(_ => this.search(q));
}
search(keyword:any) {
//do some activity using }
请注意:您可以使用this.router。导航(['search']而不是this.router。导航((“。”)
我最终把urlTree和location.go结合起来
const urlTree = this.router.createUrlTree([], {
relativeTo: this.route,
queryParams: {
newParam: myNewParam,
},
queryParamsHandling: 'merge',
});
this.location.go(urlTree.toString());
不确定toString是否会导致问题，但不幸的是location。Go似乎是基于字符串的。
