쿼리 매개변수 또는 경로 매개변수를 사용한 Angular URL 상태 관리

이 블로그 게시물은 브라우저 URL을 사용하여 상태를 유지하는 프로세스를 설명합니다. Angular에는 상태를 관리하는 몇 가지 방법이 있습니다.

각도 서비스

NgRx, Akita, Elf 등과 같은 상태 관리 라이브러리

그러나 경우에 따라 URL을 공유하고 다른 사람이 정확한 항목 목록을 볼 수 있도록 할 수 있습니다(동일한 순서 및 필터 적용). 예를 들어, 여행 웹사이트에서 항공편을 검색하고 특정 날짜에 좋은 거래를 찾을 때 친구와 URL을 공유하면 친구를 위해 기본 선택으로 웹페이지를 로드합니다. 그러나 URL 상태 관리를 사용하면 모든 변경 사항이 URL에서 업데이트되고 URL을 사용하는 모든 사람이 동일한 선택 항목을 볼 수 있습니다.

쿼리 매개변수와 경로 매개변수

2가지 방법 중 하나로 보관할 수 있습니다.

쿼리 매개변수

경로 매개변수

검색어 매개변수는 URL 끝에 첨부된 정의된 매개변수 집합이며 "?"로 시작하는 표준 구문을 따릅니다. 그런 다음 각 추가 매개변수 뒤에 "&"가 붙습니다.

https://DOMAIN_NAME/employee/all?pageIndex=5&pageSize=10&sortDirection=asc&sortBy=salary

경로 매개변수는 ";"와 같은 단일 매개변수 구분 기호만 있다는 점을 제외하고 유사한 쿼리 매개변수입니다. 그리고 이것은 변경될 수 있습니다

https://DOMAIN_NAME/employee/all;pageIndex=5;pageSize=10;sortDirection=asc;sortBy=salary

프로젝트에서 둘 중 하나를 사용할 수 있습니다. 나는 일반적으로 가장 일반적이기 때문에 쿼리 매개 변수에 끌립니다.

개요

이 블로그 게시물에서는 각도 재료 테이블 정렬 열, 정렬 순서, 페이지 크기, 페이지 색인, 검색 텍스트 등의 선택 항목을 URL에 보존합니다. 사용자가 URL을 클릭하여 다른 페이지로 이동한 다음 나중에 브라우저 뒤로 버튼을 클릭하여 이전 페이지로 돌아오면 동일한 결과가 표시됩니다. 그러나 이것은 입력, 테이블, 탭 선택 등에 적용될 수도 있습니다.

이 예에서 정의한 것처럼 Mat 테이블에 직원 목록을 표시하는 모든 직원 구성 요소가 있습니다. 다음 작업을 지원합니다.

정렬

필터링

페이지 매김

URL 업데이트:

모든 직원 구성 요소는 테이블 데이터 소스를 정의하고, 데이터를 추가하고, 페이지네이터 및 분류기를 할당합니다. 여기에서 전체 구성 요소 소스 코드를 참조하십시오. URL에 사용자 선택을 저장하기 위해 methodupdateRouteParameters()는 테이블의 모든 이벤트를 수신합니다.

사용자가 열의 정렬 순서를 변경하거나 필터 텍스트를 입력하거나 페이지 크기 또는 페이지 인덱스를 변경하면 이 메서드는 URL을 업데이트합니다. 그리고 그것은 아래와 같이 보일 것입니다

경로 매개변수를 사용하려면 위 코드의 15행에서 ​​약간 변경하면 됩니다.

그러면 URL은

선택한 옵션으로 웹페이지 로드:

정렬, 필터링, 페이지 매김 옵션을 변경하고 웹페이지를 새로고침하거나 다른 브라우저 탭에서 이 URL을 연 후에는 정확한 선택으로 테이블을 로드해야 합니다.

mapTableData() 메서드는 테이블 데이터 소스에 데이터를 할당하고 URL에 테이블 옵션이 있는 경우 테이블 형식을 지정합니다.

예를 들어 사용자가 링크에 액세스할 때

테이블은 페이지 크기가 10인 다섯 번째 페이지를 급여 열별로 오름차순으로 정렬하여 표시해야 합니다. 이를 위해서는 이러한 매개변수를 확인하고 테이블 데이터 소스를 수정해야 합니다.

참조용으로 코드를 Stackblitz에 업로드했습니다. 행복한 코딩 :)