Uso de parámetros de rutas en el componente en Angular

Ahora veamos cómo podemos utilizar los parámetros de las rutas dentro de la clase del componente.

Supongamos que tenemos la siguiente ruta con parámetros:

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

Supongamos que tenemos enlaces para navegar a este componente con varios parámetros:

<nav>
	<a
		routerLink="/aaaa/1"
		routerLinkActive="active"
	>
		1
	</a>
	<a
		routerLink="/aaaa/2"
		routerLinkActive="active"
	>
		2
	</a>
	<a
		routerLink="/aaaa/3"
		routerLinkActive="active"
	>
		3
	</a>
</nav>

Supongamos que en el componente hijo hay la siguiente matriz:

let arr: string = [
	'a', 'b', 'c', 'd', 'e'
];

export class AaaaComponent {

}

Dependiendo del valor del parámetro de ruta, obtengamos el elemento correspondiente de la matriz:

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

Mostremos el elemento obtenido en la vista:

valor: {{ value }}

Supongamos que en el componente hijo se almacena la siguiente matriz de objetos:

[
	{
		name: 'user1',
		surn: 'surn1',
	},
	{
		name: 'user2',
		surn: 'surn2',
	},
	{
		name: 'user3',
		surn: 'surn3',
	},
]

Crea una ruta con un parámetro. Dependiendo del valor del parámetro, que se muestren en la vista los datos de uno de los usuarios.