Angular 컴포넌트에서 라우트 매개변수 값 가져오기

우리가 라우트에 정의하는 매개변수 값은 컴포넌트 클래스에서 얻을 수 있습니다. 어떻게 하는지 살펴보겠습니다. 다음과 같은 매개변수가 있는 라우트가 있다고 가정해 봅시다:

app/app.routes.tsconst routes: Routes = [
  { path: 'aaaa/:id', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

이 매개변수 값을 컴포넌트 클래스에서 얻어봅시다. 여기서 주의할 점은 라우트 매개변수 값은 해당 라우트에 연결된 컴포넌트 내에서만 얻을 수 있다는 것입니다. 우리의 경우 라우트에는 Aaaa 컴포넌트가 연결되어 있습니다. 따라서 이후 작업은 이 컴포넌트로 진행하겠습니다.

그렇다면, 라우트 매개변수 값을 얻으려면 ActivatedRoute 서비스를 사용해야 합니다. 이 서비스를 우리 컴포넌트로 가져옵니다:

app/aaaa/aaaa.component.tsimport { ActivatedRoute} from "@angular/router";

생성자에 서비스를 주입합니다:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    
  }
}

매개변수가 있는 객체를 얻습니다:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    console.log(params);
  }
}

우리 매개변수의 값을 얻습니다:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    let id = params['id'];
    console.log(id);
  }
}