Estoy realizando una pequeña web en angular y me he encontrado un problema de refactorización. Entiendo que para subsanar esto podría usar el ngfor, sin embargo, me asalta una duda y es que cada uno de los productos de mi tienda dispone de su correspondiente nombre, descripción e imagen. Estos datos los he creado manualmente en sus propios components, es decir en el movil.component.ts, tengo su nombre: XXXXX, descripción: XXXXX, imagen: ../xxxx/xxxx.jpg, y así.
Mi pregunta es ¿cómo puedo dejar mi código más refactorizado? Noto que prácticamente el codigo de mis productos son en esencia iguales, a excepción de los propios datos que lo componen.
Si se necesita más óodigo de mis componentes, hacédmelo saber y los publico sin ningún problema.
modal.component.html.
<div class="modal">
<div class="modal_body modal modal-dialog">
<button class="boton_cerrar modal-content aumento" (click)="closeModal()">X</button>
<div class="productos_tienda modal-content">
<button class="boton-Movil aumento" (click)="openMovil()">Movil</button>
<div class=" modal-content" *ngIf="modalMovil == true">
<app-movil></app-movil>
</div>
<button class="boton-Bberry aumento" (click)="openBlackberry()">Blackberry</button>
<div class=" modal-content" *ngIf="modalBlackBerry == true">
<app-blackberry></app-blackberry>
</div>
<button class="boton-Vinilo aumento" (click)="openVinilo()">Vinilo</button>
<div class=" modal-content" *ngIf="modalVinilo == true">
<app-vinilo></app-vinilo>
</div>
</div>
</div>
</div>
modal.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { SwitchService } from '../service/switch.service';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
@Input()
modalMovil!: boolean;
modalBlackBerry!: boolean;
modalVinilo!: boolean;
constructor(private modalSS: SwitchService) { }
ngOnInit(): void {
// Esto es para escuchar el evento (Cuando se ejecute el .emiter(false) que haces desde el componente movil.component)
this.modalSS.$modalMovil.subscribe(valor => this.modalMovil = valor);
this.modalSS.$modalBlackBerry.subscribe(valor => this.modalBlackBerry = valor);
this.modalSS.$modalVinilo.subscribe(valor => this.modalVinilo = valor);
}
closeModal()
{
this.modalSS.$modal.emit(false)
console.log("Boton cerrar modal funciona correctamente");
}
openMovil()
{
this.modalMovil = true;
console.log("Movil funciona correctamente");
}
openBlackberry()
{
this.modalBlackBerry = true;
console.log("Blackberry funciona correctamente");
}
openVinilo()
{
this.modalVinilo = true;
console.log("Vinilo funciona correctamente");
}
}
movil.component.ts
import { Component, OnInit } from '@angular/core';
import { SwitchService } from 'src/app/service/switch.service';
@Component({
selector: 'app-movil',
templateUrl: './movil.component.html',
styleUrls: ['./movil.component.css']
})
export class MovilComponent implements OnInit {
nombre = 'Nokia 3310';
descripcion = 'Movil Nokia 3310 listo para comprar a un precio bastante economico.';
imagen = '../../../assets/img/movil.JPG';
closeMovil()
{
this.modalSS.$modalMovil.emit(false)
console.log("Boton cerrar movil funciona correctamente");
}
constructor(private modalSS: SwitchService) { }
ngOnInit(): void {
}
}
appmodule.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ModalComponent } from './modal/modal.component';
import { MovilComponent } from './modal/movil/movil.component';
import { BlackberryComponent } from './modal/blackberry/blackberry.component';
import { ViniloComponent } from './modal/vinilo/vinilo.component';
@NgModule({
declarations: [
AppComponent,
ModalComponent,
MovilComponent,
BlackberryComponent,
ViniloComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
*ngFor
.