I am trying to obtain the data of each record through ActivatedRouted, I have managed to obtain the ID of each one but I can not get the other data. Any ideas?
My stackblitz:
https://stackblitz.com/edit/angular-activatedroute-params
services.ts
getProductos() {
this.productos = [
{
id: 'lomoFino',
titulo: 'Lomo fino',
descripcion: 'Es la pieza más fina de la res, de textura tierna.',
recomendaciones: ['Guisos', 'Freir', 'Plancha'],
ubicacion: 'Lomo',
},
{
id: 'colitaCuadril',
titulo: 'Colita de cuadril',
descripcion: 'Es un corte triangular y ligeramente marmoleado.',
recomendaciones: ['Guisos', 'Freir', 'Horno'],
ubicacion: 'Trasera',
},
{
id: 'asadoCuadrado',
titulo: 'Asado cuadrado',
descripcion: 'Corte fibroso, de sabor agradable.',
recomendaciones: ['Guisos', 'Freir', 'Plancha'],
ubicacion: 'Entrepierna',
}
]
return this.productos
}
productos.component.ts
ngOnInit() {
this.productos = this.ps.getProductos();
}
productos.component.html
<div *ngFor="let producto of productos">
<a [routerLink]="['/productos', producto.id]">{{ producto.titulo }}</a>
</div>
producto-detalle.component.ts
constructor( private activatedRoute: ActivatedRoute ) { }
ngOnInit() {
this.id = this.activatedRoute.snapshot.paramMap.get('id')
this.titulo = this.activatedRoute.snapshot.paramMap.get('titulo')
this.descripcion = this.activatedRoute.snapshot.paramMap.get('descripcion')
}
producto-detalle.component.html
ID: {{ id }}<br>
Título: {{ titulo }}<br>
Descripción: {{ descripcion }}<br>
How can I get titulo anddescripcion for example.
Andriy :
You can use ActivatedRoute's resolver(see Resolve: pre-fetching component data). This way, your producto data will be pre-fetched to the ActivatedRoute's\ndata object and be available under activatedRoute.snapshot.data. Now you can use it in your component:\n\nngOnInit() {\n const producto = this.activatedRoute.snapshot.data.producto;\n\n this.id = producto.id;\n this.titulo = producto.titulo;\n this.descripcion = producto.descripcion;\n}\n\n\nYour router config should be updated with resolver:\n\nconst routes: Routes = [\n { path: '', component: ProductosComponent },\n { \n path: 'productos/:id', \n component: ProductoDetalleComponent,\n resolve: {\n producto: ProductoResolver\n }\n },\n];\n\n\nSTACKBLITZ\n\nCrisis center code",
2018-07-16T21:39:23
Alexis_Ni :
You have to add all the data to the params list. First update the app.router.ts with the following code:\n\n{ path: 'productos/:id/:titulo/:description', component: ProductoDetalleComponent }\n\n\nUpdate the code at productos.component: \n\n<a [routerLink]=\"['/productos', producto.id,producto.titulo,producto.descripcion]\">\n\n\nHere is a working stackblitz",
2018-07-16T20:47:46