0

estoy editando un template de un e-commerce. Necesito completar el paso a los detales de cada producto.

Tengo el componente product con el archivo product-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductDetailsComponent } from './product-details/product-details.component';
import { ProductListComponent } from './product-list/product-list.component';

const routes: Routes = [
  {
    path: '',
    component: ProductListComponent
  },
  {
    path: ':id',
    component: ProductDetailsComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductRoutingModule {}

Dentro de este el componente product-card con el archivo product-card.component.ts

import { Component, Input, OnInit } from '@angular/core';


@Component({
  selector: 'll-product-card',
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.css']
})
export class ProductCardComponent {
  @Input() product: any;
   }

y el correspondiente product-card.component.html con el siguiente link en un boton

      <a [routerLink]="['/products', product.id]" mat-raised-button color="warn" class="px-4">Más detalles</a>

Que apunta a otro componente dentro de productos = product-details con el archivo product-details.component.ts

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

@Component({
  selector: 'll-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.scss']
})
export class ProductDetailsComponent implements OnInit {
  detalle = [
{
  id: 1,
  detalle: 'Industria'
},
{
  id: 2,
  detalle: 'Farmacia'
},
{
  id: 3,
  detalle: 'Taller'
}
];
  constructor() { }

  ngOnInit(): void {
  }

}
    

y el html del mismo donde introduciría las variables.

Mi consulta es sobre los esto último, para poder pasar las variables. Si me podrían ayudar a completarla. Muchas gracias

2 respuestas 2

1

Entiendo que queres pasar el id a ProductDetailsComponent buscar un detalle adicional del producto y mostrarlo No veo el path { path: 'product', component: ProductComponent } para luego asociar la ruta id en el codigo que subiste o definirlo como{ path: 'products/:id', component: ProductDetailsComponent } El siguiente código considera la responsabilidad de los componentes que definiste y las rutas adecuadas tambien codigo en repositorio de github codigo de la respuesta

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductCardComponent } from './product-card/product-card.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { ProductListComponent } from './product-list/product-list.component';

const routes: Routes = [
  {path: '',component: ProductListComponent, },
  { path: "product", component: ProductCardComponent },
  {path: 'product/:id',component:ProductDetailComponent}  
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
//product-list.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {
productos=[
  {
    id: 1,
    cantidad:3

  },
  {
    id: 2,
    cantidad:2
  },
  {
    id: 3,
    cantidad:5
  }
  ]
  constructor() { }

  ngOnInit(): void {
  }

}
//product-card.component.ts
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.scss']
})
export class ProductCardComponent implements OnInit {
  @Input() product: any;
  constructor() { }

  ngOnInit(): void {
    console.log(this.product.id)
  }

}
//product-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.scss']
})
export class ProductDetailComponent implements OnInit {
  sub: any;
  product: any;
  id: any;
  detalles = [
    {
      id: 1,
      detalle: 'Industria'
    },
    {
      id: 2,
      detalle: 'Farmacia'
    },
    {
      id: 3,
      detalle: 'Taller'
    }
    ];
  constructor(private activatedroute:ActivatedRoute,
    private router:Router,) { }

  ngOnInit(): void {
    this.sub=this.activatedroute.paramMap.subscribe({next:params => { 
      
    this.id = params.get('id'); 
      
    this.product=this.detalles.find(p => p.id==this.id);    
   }});
  }
  Volver(): void {
    this.router.navigate(['/']);
 }

}

  
<!-- product-list.component.html-->
<main>
<app-product-card
*ngFor="let p of productos"
    [product]="p"

></app-product-card>
</main>
<!-- product-card.component.html-->
<a
 [routerLink]="['/product', product.id]">
     {{product.id}}
 </a>
<!-- app.component.html -->
<router-outlet></router-outlet>

2
  • Muchas gracias, era lo que necesitaba.
    – Hernan527
    el 8 abr. 2022 a las 21:00
  • Si entonces te sirve mi respuesta podes dar por terminada la búsqueda aceptándola de lo contrario continuara como pregunta sin responder saludos
    – nestdan
    el 9 abr. 2022 a las 15:21
0

En una configuración de rutas podríamos tener rutas con parámetros, es decir, rutas con una parte fija y otra variable. Por ejemplo:

const appRoutes: Routes = [
{ path: ‘libro/:id’, component:<componente a
mostrar>]

Utilice “:” para indicar los parámetros de las rutas que configures.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.