Valores dos parâmetros de rotas no componente em Angular

Os valores dos parâmetros que definimos nas rotas podem ser obtidos na classe do componente. Vamos ver como isso pode ser feito. Suponha que temos a seguinte rota com parâmetros:

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

Vamos obter o valor deste parâmetro na classe do componente. Aqui é importante observar que os valores dos parâmetros de rota só podem ser obtidos no componente que está vinculado à rota. No nosso caso, o componente Aaaa está vinculado à rota. Portanto, vamos trabalhar com ele a partir de agora.

Então, para obter os valores dos parâmetros de rota, precisamos usar o serviço ActivatedRoute. Vamos importá-lo para o nosso componente:

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

Vamos injetar o serviço no construtor:

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

Vamos obter o objeto com os parâmetros:

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

Vamos obter o valor do nosso parâmetro:

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