Cuando tenemos un listado de registros en Angular, nos interesa en muchas ocasiones, hacer click sobre uno de ellos y ampliar la información. Este es también nuestro caso, en que queremos abrir un nuevo componente («detalle-película») cuando hacemos click en una de ellas.
El parámetro a pasar será el campo «id» de la tabla de películas:
- En el fichero app.module.ts, en el apartado donde definimos las rutas, añadiremos la siguiente: «{path: ‘detalle/:id’, component: DetallePeliculaComponent}»
- En el fichero .ts de dicho componente (DetallePeliculaComponent) tenemos que importar: «import { ActivatedRoute } from ‘@angular/router’»
- Creamos una variable local dentro del componente, llamada «pelicula» y la inicializamos al cargar con el «id» que le pasamos en la ruta url:
- pelicula :any;
- ngOnInit() {
- this.pelicula=this._Activatedroute.snapshot.paramMap.get(«id»);
- }
- Con ello podremos visualizar el campo «id» de la película de la que se desea ver los detalles; en el fichero .html del componente, podríamos entrar la siguiente línea para comprobarlo: «<h1>Película: {{pelicula}}</h1>»