Angular get Params

agnusdei·2023년 7월 11일
0

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을 사용하면 됩니다.

0개의 댓글