[javascript] Angular 2에서 다시로드하지 않고 경로 매개 변수 변경

이 질문을 찾는 나 같은 사람에게는 다음이 유용 할 수 있습니다.

비슷한 문제가 있었고 처음에는 여기에 다른 답변에서 제안한대로 location.go 및 location.replaceState를 사용해 보았습니다. 그러나 탐색이 현재 경로에 상대적이고 현재 경로가 location.go 또는 location.replaceState에 의해 업데이트되지 않았기 때문에 앱의 다른 페이지로 이동해야 할 때 문제가 발생했습니다 (라우터는 아무것도 알지 못함). URL에 대한 작업)

본질적으로 나는 경로 매개 변수가 변경되었을 때 페이지 / 구성 요소를 다시로드하지 않고 내부적으로 경로 상태를 업데이트하는 솔루션이 필요했습니다.

결국 쿼리 매개 변수를 사용하게되었습니다. https://angular-2-training-book.rangle.io/handout/routing/query_params.html 에서 자세한 내용을 확인할 수 있습니다.

따라서 주문을 저장하고 주문 ID를 가져와야하는 경우 아래와 같이 페이지 URL을 업데이트 할 수 있습니다. 지도에서 중심 위치 및 관련 데이터를 업데이트하는 것은 유사합니다.

// let's say we're saving an order. Initally the URL is just blah/orders
save(orderId) {
    // [Here we would call back-end to save the order in the database]

    this.router.navigate(['orders'], { queryParams: { id: orderId } });
    // now the URL is blah/orders?id:1234. We don't reload the orders
    // page or component so get desired behaviour of not seeing any 
    // flickers or resetting the page.
}

다음과 같이 ngOnInit 메서드 내에서 추적합니다.

ngOnInit() {
    this.orderId = this.route
        .queryParamMap
        .map(params => params.get('id') || null);
    // orderID is up-to-date with what is saved in database now, or if
    // nothing is saved and hence no id query paramter the orderId variable
    // is simply null.
    // [You can load the order here from its ID if this suits your design]
}

새로운 (저장되지 않은) 주문으로 주문 페이지로 직접 이동해야하는 경우 다음을 수행 할 수 있습니다.

this.router.navigate(['orders']);

또는 기존 (저장된) 주문에 대한 주문 페이지로 직접 이동해야하는 경우 다음을 수행 할 수 있습니다.

this.router.navigate(['orders'], { queryParams: { id: '1234' } });

답변

import {OnInit} from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'example-component',
  templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
  constructor( private location: Location )
  {}

  ngOnInit()
  {
    this.location.go( '/example;example_param=917' );
  }
}

const queryParamsObj = {foo: 1, bar: 2, andThis: 'text'};

this.location.replaceState(
  this.router.createUrlTree(
    [this.locationStrategy.path().split('?')[0]], // Get uri
    {queryParams: queryParamsObj} // Pass all parameters inside queryParamsObj
  ).toString()
);

this.router.navigate(
  [this.locationStrategy.path().split('?')[0]],
  {queryParams: queryParamsObj}
);

this._location.go(this._router.createUrlTree([this._router.url], { queryParams: { profile: value.id } }).toString())