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