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:

const 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:

import { ActivatedRoute} from "@angular/router";

Vamos injetar o serviço no construtor:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		
	}
}

Vamos obter o objeto com os parâmetros:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		let params = activateRoute.snapshot.params;
		console.log(params);
	}
}

Vamos obter o valor do nosso parâmetro:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		let params = activateRoute.snapshot.params;
		let id = params['id'];
		console.log(id);
	}
}

Obtenha os valores dos seus parâmetros.