我正在尝试从组件中更新（添加、删除）queryParams。在 angularJS 中，它曾经是可能的，这要归功于：
$location.search('f', 'filters[]'); // setter
$location.search()['filters[]']; // getter
我有一个应用程序，其中包含用户可以过滤、订购等的列表，我想在 url 的 queryParams 中设置所有激活的过滤器，以便他可以复制/粘贴 url 或与其他人共享。
但是，我不希望每次选择过滤器时都重新加载我的页面。
新路由器可以做到这一点吗？
【问题讨论】：
标签： angular query-parameters angular-router
您可以使用新的查询参数导航到当前路线，这不会重新加载您的页面，但会更新查询参数。
类似的东西（在组件中）：
constructor(private router: Router) { }
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 }。
编辑：
正如 cmets 中已经指出的那样，[] 和 relativeTo 属性在我的原始示例中丢失了，因此它也可能更改了路由，而不仅仅是查询参数。在这种情况下，正确的 this.router.navigate 用法将是：
this.router.navigate(
[],
{
relativeTo: this.activatedRoute,
queryParams: { myParam: 'myNewValue' },
queryParamsHandling: 'merge'
});
将新参数值设置为 null 将从 URL 中删除参数。
【讨论】：
[] 而不是 ['.'] 才能使其工作
this.activatedRoute.queryParams.subscribe 手动完成此操作并在您的组件中进行各种更新，但是是否有一种简单的 Angular 方法来加载路由，以便自动前后工作？
@Radosław Roszkowiak 的答案几乎是正确的，除了relativeTo: this.route 是必需的，如下所示：
constructor(
private router: Router,
private route: ActivatedRoute,
) {}
changeQuery() {
this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }});
}
【讨论】：
在 Angular 5 中，您可以通过解析当前 url 轻松获取和修改 urlTree 的副本。这将包括查询参数和片段。
let urlTree = this.router.parseUrl(this.router.url);
urlTree.queryParams['newParamKey'] = 'newValue';
this.router.navigateByUrl(urlTree);
修改查询参数的“正确方法”可能是 createUrlTree 如下所示，它从当前创建一个新的 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。
【讨论】：
navigateByUrl 与 navigate 不同——不仅仅是 UrlTree 参数。见stackoverflow.com/a/45025432/271012
投票最多的答案部分对我有用。浏览器 url 保持不变，但我的 routerLinkActive 在导航后不再工作。
我的解决方案是使用 lotation.go：
import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { HttpParams } from "@angular/common/http";
export class whateverComponent {
constructor(private readonly location: Location, private readonly router: Router) {}
addQueryString() {
const params = new HttpParams();
params.append("param1", "value1");
params.append("param2", "value2");
this.location.go(this.router.url.split("?")[0], params.toString());
}
}
我使用 HttpParams 来构建查询字符串，因为我已经使用它通过 httpClient 发送信息。但你可以自己构建它。
和this._router.url.split("?")[0]，是从当前url中删除所有以前的查询字符串。
【讨论】：
this.location.path().split... 不是更好吗？
试试
this.router.navigate([], {
queryParams: {
query: value
}
});
将适用于除单引号之外的相同路线导航。
【讨论】：
如果您想更改查询参数而不更改路由。见下文
示例可能会帮助您：
当前路线是：/search
& 目标路线是（没有重新加载页面）：/search?query=love
submit(value: string) {
this.router.navigate( ['.'], { queryParams: { query: value } })
.then(_ => this.search(q));
}
search(keyword:any) {
//do some activity using }
请注意：您可以使用this.router.navigate( ['search'] 代替this.router.navigate( ['.']
【讨论】：
relativeTo: 更好的方法，但 .then() 很有帮助 - 不知道 navigate() 返回了一个承诺，很高兴你发布了!
我最终将urlTree 与location.go 结合在一起
const urlTree = this.router.createUrlTree([], {
relativeTo: this.route,
queryParams: {
newParam: myNewParam,
},
queryParamsHandling: 'merge',
});
this.location.go(urlTree.toString());
不确定toString 是否会导致问题，但不幸的是location.go 似乎是基于字符串的。
【讨论】：
更好 - 只是 HTML：
<a [routerLink]="[]" [queryParams]="{key: 'value'}">Your Query Params Link</a>
注意空数组，而不是只做routerLink="" 或[routerLink]="''"
【讨论】：
首先，我们需要从 Angular 路由器中导入路由器模块并声明其别名
import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
private router: Router ---> decalre alias name
) { }
}
1。您可以使用“router.navigate”函数更改查询参数并传递查询参数
this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"}
});
它将更新当前即激活路由中的查询参数
下面将重定向到带有_id，day的abc页面 并命名为查询参数
this.router.navigate(['/abc'], { queryParams: {_id: "abc", day: "1", name: “dfd”} });
它将更新“abc”路由中的查询参数以及三个查询参数
获取查询参数：-
import { ActivatedRoute } from '@angular/router'; //import activated routed
export class ABC implements OnInit {
constructor(
private route: ActivatedRoute //declare its alias name
) {}
ngOnInit(){
console.log(this.route.snapshot.queryParamMap.get('_id')); //this will fetch the query params
}
【讨论】：
Angular 的定位服务应该在与浏览器的 URL 交互时使用，而不是用于路由。这就是为什么我们要使用Location 服务。
Angulars HttpParams 用于创建查询参数。请记住 HttpParam 是不可变的，这意味着在创建值时必须将其链接起来。
最后，使用this._location.replaceState更改为URL而不重新加载页面/路由和原生js location.path获取不带参数的url每次重置参数。
constructor(
private _location: Location,
) {}
...
updateURLWithNewParamsWithoutReloading() {
const params = new HttpParams().appendAll({
price: 100,
product: 'bag'
});
this._location.replaceState(
location.pathname,
params.toString()
);
}
【讨论】：