내가 노력하고 업데이트(를 추가,제거)queryParams 에서 구성 요소입니다. 에련,그것은 사용 가능합니다.
$location.search('f', 'filters[]'); // setter
$location.search()['filters[]']; // getter
좋아하는 응용 프로그램 목록과 함께할 수 있는 필터 순서,등등과 같은 설정에서 queryParams 의 url 을 모두 필터를 활성화된 그래서 그는 복사/붙여 넣을 수 있습 url 나 다른 사람.
그러나,I don't 원하는 나의 페이지를 다시 로드해야 하각 시간을 필터링은 선택됩니다.
이 할 수 있으로 새로운 모니터링 가능합니다.
로 이동할 수 있는 현재의 경로와 새로운 쿼리 params 하지 않습니다 다시 당신의 페이지를 업데이트 쿼리라.
같은 것(구성요소에서):
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
});
}
주는 반면 그't 페이지를 다시 로드,그것은 밀어 새로운 항목을 브라우저는's history. 대체하려는 경우 그것은 역사를 추가하는 대신 새로운 가치가 사용할 수 있습니다{queryParams:queryParams,replaceUrl:true}
.
편집:
로 이미 지적에[]
와relativeTo
등이 누락되었에서 내 원래 예에서,그래서 그것을 변경할 수 있는 경로뿐만 아니라,단지 쿼리라. 적절한`이다.라우터입니다.로 사용이 될 것입니다 이 경우는 다음과 같습니다.
this.router.navigate(
[],
{
relativeTo: this.activatedRoute,
queryParams: { myParam: 'myNewValue' },
queryParamsHandling: 'merge'
});
설정하는 새로운 매개 변수 값을null
제거됩니다 param 에서 URL 이 있습니다.
에서 각 5 얻을 수 있습니다 쉽게 수정할 수의 복사본을urlTree에 의해 분석 현재 url 이 있습니다. 이 포함됩니다 쿼리 params 및 조각.
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
.
도
this.router.navigate([], {
queryParams: {
query: value
}
});
을 위해 일한다 같은 경로 탐색 이외의 다른 작은 따옴표.
를 변경하려는 경우 쿼리 params 없이 변경합니다. 아래 참조 를 들어 당신을 도울 수 있: 현재 날:/search &목표로(없이 페이지를 새로 고침):/검색?를 사랑
submit(value: string) {
{ this.router.navigate( ['.'], { queryParams: { query: value } })
.then(_ => this.search(q));
}
search(keyword:any) {
//do some activity using }
참고:당신이 사용할 수 있*다.라우터입니다.탐색(['search']대신다.라우터입니다.이동( ['.']
대답으로 가장 투표는 부분적으로는 나를 위해 일했습니다. 브라우저는 url 을도 동일 하지만 나의routerLinkActive
되지 않았는 더 이상 작동 후 탐색.
나의 솔루션을 사용하 lotation.이동:
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. 지만,당신은 단지 구축합니다.
그리고이다._router.url.split("?")[0]
,이를 제거하는 모든 이전 쿼리에서 문자열은 현재 url 이 있습니다.
첫째,우리가 필요한을 가져올 라우터 모듈에서 각 라우터 및 선언 별칭 이름
import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
private router: Router ---> decalre alias name
) { }
}
다.라우터입니다.탐색([],{queryParams:{그리고 우리:"abc",일:"1",이름:"는 수많은 적 아머먼"} });
그것은 것입 업데이트 쿼리 params 현재 나.전자 활성화를 날고있다
다.라우터입니다.탐색(['/abc'],{queryParams:{그리고 우리:"abc",일:"1",이름: "는 수많은 적 아머먼"} });
그것은 것입 업데이트 쿼리 params in"abc"경로를 함께 세 가지 쿼리를 파라미터
가져오기 위한 쿼리 params:-
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
}