我试图更新(添加,删除)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中删除参数。
你也可以像这样添加行为主体:
refresher$ = new BehaviorSubject(null);
我改变了我的代码:
this.route.queryParamMap.subscribe(some code)
to:
combineLatest([
this.route.queryParamMap,
this.refresher$
])
.pipe(
map((data) => data[0])
)
.subscribe(here is your the same code)
当你需要刷新订阅时,你需要调用这个:
this.refresher$.next(null);
不要忘记添加unsubscribe from the ngOnDestroy
您可以使用新的查询参数导航到当前路由,这不会重新加载页面,但会更新查询参数。
类似于(在组件中):
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的Location服务应该在与浏览器的URL交互时使用,而不是用于路由。这就是为什么我们要使用位置服务。
angular HttpParams用于创建查询参数。请记住HttpParams是不可变的,这意味着在创建值时它必须被链接。
最后,使用this._location。replaceState更改为URL,而无需重新加载页面/路由和原生js位置。获取没有参数的url的路径,以每次重置参数。
constructor(
private _location: Location,
) {}
...
updateURLWithNewParamsWithoutReloading() {
const params = new HttpParams().appendAll({
price: 100,
product: 'bag'
});
this._location.replaceState(
location.pathname,
params.toString()
);
}