我试图更新(添加，删除)queryParams从一个组件。在angularJS中，它曾经是可能的，这要归功于:
$location.search('f', 'filters[]'); // setter
$location.search()['filters[]']; // getter
我有一个应用程序的列表，用户可以过滤，顺序等，我想设置在url的queryParams所有过滤器激活，这样他就可以复制/粘贴url或与他人共享。
但是，我不希望每次选择筛选器时都重新加载页面。
新路由器能做到吗?
当前回答
首先，我们需要从angular router导入router模块，并声明它的别名
import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
private router: Router ---> decalre alias name
) { }
}
1. 您可以使用“router”更改查询参数。函数并传递查询参数
this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"}
});
它将更新当前即激活路由中的查询参数
下面将重定向到abc页面_id，日 和name作为查询参数 this.router。导航([' / abc '], {queryParams: {_id:“abc”,天:“1”,名称: “目前”} })； 它将更新“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
}
其他回答
大多数人投票的答案在一定程度上对我有用。浏览器的url保持不变，但我的routerLinkActive在导航后不再工作。
我的解决方案是使用lotit .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中删除所有之前的查询字符串。
我最终把urlTree和location.go结合起来
const urlTree = this.router.createUrlTree([], {
relativeTo: this.route,
queryParams: {
newParam: myNewParam,
},
queryParamsHandling: 'merge',
});
this.location.go(urlTree.toString());
不确定toString是否会导致问题，但不幸的是location。Go似乎是基于字符串的。
首先，我们需要从angular router导入router模块，并声明它的别名
import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
private router: Router ---> decalre alias name
) { }
}
1. 您可以使用“router”更改查询参数。函数并传递查询参数
this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"}
});
它将更新当前即激活路由中的查询参数
下面将重定向到abc页面_id，日 和name作为查询参数 this.router。导航([' / abc '], {queryParams: {_id:“abc”,天:“1”,名称: “目前”} })； 它将更新“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
}
你也可以像这样添加行为主体:
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
Try
this.router.navigate([], {
queryParams: {
query: value
}
});
将工作于同一路线导航，而不是单引号。
