我试图更新(添加,删除)组件的查询参数。在AngularJS中,这是可能的,感谢:
$location.search('f', 'filters[]'); // setter
$location.search()['filters[]']; // getter
我有一个应用程序,其中用户可以筛选、排序等操作列表。我希望在URL的查询参数中设置所有已激活的过滤器,以便用户可以复制/粘贴URL或与其他人共享。
然而,我不想在选择任何筛选器时重新加载页面。
使用新路由器能否实现这一点?
我试图更新(添加,删除)组件的查询参数。在AngularJS中,这是可能的,感谢:
$location.search('f', 'filters[]'); // setter
$location.search()['filters[]']; // getter
我有一个应用程序,其中用户可以筛选、排序等操作列表。我希望在URL的查询参数中设置所有已激活的过滤器,以便用户可以复制/粘贴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: this.activatedRoute,
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中删除该参数。@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参数。请参见https://dev59.com/fFcO5IYBdhLWcg3w-VxX#45025432。 - Drenai得票最高的答案对我有所帮助。浏览器URL保持不变,但我的 routerLinkActive
在导航后不再起作用。
我的解决方案是使用 router.navigate().then(() => location.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...
更好吗? - Vladimirlocation.replaceState
。 - Michał Stochmal尝试
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() 返回一个 promise,所以很高兴你发了这个帖子! - DrenaiurlTree
和location.go
结合起来。const urlTree = this.router.createUrlTree([], {
relativeTo: this.route,
queryParams: {
newParam: myNewParam,
},
queryParamsHandling: 'merge',
});
this.location.go(urlTree.toString());
不确定 toString
是否会引起问题,但不幸的是 location.go
似乎基于字符串。
<a [routerLink]="[]" [queryParams]="{key: 'value'}">您的查询参数链接</a>
routerLink=""
或 [routerLink]="''"
。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()
);
}
首先,我们需要从Angular Router中导入路由模块并声明其别名
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和name重定向到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
}
[]
而不是['.']
。 - Jaime Gómezthis.activatedRoute.queryParams.subscribe
手动完成此操作,并在组件中进行各种更新,但是是否有一种简单的Angular方法只需加载路由即可自动处理前进和后退? - jmq