8. productoDetalle

app.routes.ts

import { Routes } from '@angular/router';
import { InicioComponent } from './pages/inicio/inicio';
import { ProductosComponent } from './pages/productos/productos';
import { Pagina404Component } from './pages/pagina404/pagina404';
import { ProductoDetalleComponent } from './pages/producto-detalle/producto-detalle';

export const routes: Routes = [
  { path: '', redirectTo: 'inicio', pathMatch: 'full' },
  { path: 'inicio', component: InicioComponent },
  { path: 'productos', component: ProductosComponent },
  { path: 'producto/:id', component: ProductoDetalleComponent },
  { path: '**', component: Pagina404Component },
];

productos.ts

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-productos',
  imports: [RouterLink],
  templateUrl: './productos.html',
  styleUrl: './productos.css',
})
export class ProductosComponent {
  productos = [
    { id: 1, nombre: 'Portátil' },
    { id: 2, nombre: 'Monitor' },
    { id: 3, nombre: 'Teclado' },
  ];
}

productos.html

<h2>Página Productos</h2>

<ul>
  @for (p of productos; track p.id) {
    <li>
      {{ p.nombre }}
      -
      <a [routerLink]="['/producto', p.id]">Ver (id={{ p.id }})</a>
    </li>
  }
</ul>

productoDetalle.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-producto-detalle',
  imports: [],
  templateUrl: './producto-detalle.html',
  styleUrl: './producto-detalle.css',
})
export class ProductoDetalleComponent {

}

(Mirar funcionamiento )Añadimos una inyección 

import { Component, inject } from '@angular/core';
import { ActivatedRoute, RouterEvent, RouterLink } from '@angular/router';

@Component({
  selector: 'app-producto-detalle',
  imports: [RouterLink],
  templateUrl: './producto-detalle.html',
  styleUrl: './producto-detalle.css',
})
export class ProductoDetalleComponent {
  private route = inject(ActivatedRoute);

  id = this.route.snapshot.paramMap.get('id');
}

productosDetalle.html

<h2>Detalle del producto</h2>

<p>ID recibido por URL: <strong>{{ id }}</strong></p>

<a routerLink="/productos">(Atrás) Volver a productos</a>