모:를 업데이트하는 방법 queryParams 없이 변화하는 노선

내가 노력하고 업데이트(를 추가,제거)queryParams 에서 구성 요소입니다. 에련,그것은 사용 가능합니다.

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]'];    // getter

좋아하는 응용 프로그램 목록과 함께할 수 있는 필터 순서,등등과 같은 설정에서 queryParams 의 url 을 모두 필터를 활성화된 그래서 그는 복사/붙여 넣을 수 있습 url 나 다른 사람.

그러나,I don't 원하는 나의 페이지를 다시 로드해야 하각 시간을 필터링은 선택됩니다.

이 할 수 있으로 새로운 모니터링 가능합니다.

Jota.Toledo
편집된 질문6일 10월 2017 в 8:55
프로그래밍
angular query-parameters angular-router
29일 4월 2017 в 4:33
3 파운드

로 이동할 수 있는 현재의 경로와 새로운 쿼리 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 이 있습니다.

Phil
편집된 답변18일 7월 2019 в 7:53
해설 (11)

@Radosław Roszkowiak's 응답이 거의 바로를 제외하고는relativeTo:다.로는 필수 아래와 같: 

constructor(
  private router: Router,
  private route: ActivatedRoute,
) {}

changeQuery() {
  this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }});
}
해설 (0)

에서 각 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.

해설 (1)

도

this.router.navigate([], { 
  queryParams: {
    query: value
  }
});

을 위해 일한다 같은 경로 탐색 이외의 다른 작은 따옴표.

er-sho
편집된 답변3일 5월 2019 в 11:10
해설 (0)

를 변경하려는 경우 쿼리 params 없이 변경합니다. 아래 참조 를 들어 당신을 도울 수 있: 현재 날:/search &목표로(없이 페이지를 새로 고침):/검색?를 사랑

submit(value: string) {
{ this.router.navigate( ['.'],  { queryParams: { query: value } })
    .then(_ => this.search(q));
}
search(keyword:any) { 
//do some activity using }

참고:당신이 사용할 수 있*다.라우터입니다.탐색(['search']대신다.라우터입니다.이동( ['.']

해설 (1)

대답으로 가장 투표는 부분적으로는 나를 위해 일했습니다. 브라우저는 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 이 있습니다.

해설 (4)

첫째,우리가 필요한을 가져올 라우터 모듈에서 각 라우터 및 선언 별칭 이름

import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
    private router: Router ---> decalre alias name
  ) { }
}
  1. 을 변경할 수 있습 query 파라미터를 사용하여"라우터입니다.탐"기능과 전달 쿼리 매개변수

다.라우터입니다.탐색([],{queryParams:{그리고 우리:"abc",일:"1",이름:"는 수많은 적 아머먼"} });

그것은 것입 업데이트 쿼리 params 현재 나.전자 활성화를 날고있다

  1. 아래로 리디렉션됩니다 abc 페이지를 그리고 우리,하루 고 이름으로 쿼리 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
    }
해설 (0)