[개선] Angular 검색 기록 남겨 이전 페이지로 이동 (history back)

문제점

단순한 검색 처리

1. 검색 (API 호출) 
2. 결과처리 (목록 생성)

 

개선 방법

URL query parameter 추가

 

추가한 부분

import

import { ActivatedRoute } from '@angular/router';

 

검색 API로 넘기던 데이터를 쿼리 파라미터로 만들어 router 이동 처리 

this.router.navigate([], {
    relativeTo: this.activatedRoute,
    queryParams: urlParams,
    queryParamsHandling: 'merge',
});

 

query parameter 갱신을 확인해 해당 데이터로 API

this.activatedRoute.queryParams.subscribe(m => {
  	// Query Parameter가 갱신될 때마다 여기서 체크
	
	this.getList(); // 목록 호출
});

 

 

 

참고

https://stackoverflow.com/questions/43698032/angular-how-to-update-queryparams-without-changing-route

https://angular.io/api/router/QueryParamsHandling