Angular get Params

agnusdei·2023년 7월 11일

Angular에서 라우터의 URL 매개변수를 가져오기 위해서는 ActivatedRoute 서비스를 사용합니다. ActivatedRoute는 현재 활성화된 라우트와 관련된 정보를 제공하는 서비스입니다. URL의 매개변수에 접근하려면 다음 단계를 따르면 됩니다:

  1. ActivatedRoute 서비스를 구독하거나 사용합니다. 일반적으로 컴포넌트 생성자에서 ActivatedRoute를 주입받습니다. 예를 들어:
import { ActivatedRoute } from '@angular/router';

// ...

constructor(private route: ActivatedRoute) { }
  1. ActivatedRoute 서비스에서 URL 매개변수를 가져오기 위해 params 속성을 사용합니다. paramsObservable 타입으로 제공됩니다. 따라서 subscribe() 메서드를 사용하여 매개변수의 변경 사항을 구독하고 처리할 수 있습니다. 예를 들어:
this.route.params.subscribe(params => {
  // params 객체에서 URL 매개변수에 접근하여 사용합니다.
  const id = params['id'];
  // ...
});

위의 예제에서 id는 URL 매개변수의 이름입니다. 이를 통해 해당 URL 매개변수의 값을 가져올 수 있습니다.

  1. 만약 컴포넌트에서 초기 로드 시 URL 매개변수를 가져오기 위해 params 속성을 사용하려면 snapshot을 사용할 수도 있습니다. snapshot을 사용하면 현재 URL의 정적인 상태를 가져올 수 있습니다. 다음은 snapshot을 사용한 예시입니다:
const id = this.route.snapshot.params['id'];

위의 코드에서 snapshot.params['id']를 통해 URL 매개변수의 값을 가져올 수 있습니다.

이와 같이 ActivatedRoute 서비스를 사용하여 Angular에서 URL 매개변수를 가져올 수 있습니다. 매개변수의 변경 사항을 실시간으로 처리해야 하는 경우 params 속성을 구독하여 변경 사항을 감지하고, 초기 로드 시에만 매개변수를 가져와야 하는 경우 snapshot을 사용하면 됩니다.

profile
DevSecOps, Pentest, Cloud(OpenStack), Develop, Data Engineering, AI-Agent

0개의 댓글