0

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 { }
2
  • 1
    ¿cómo puedo dejar mi código más refactorizado? -> Haces cambios, los guardas y los añades al repositorio. Enhorabuena, ya has refactorizado tu código, ergo, está "más refactorizado". Supongo que en realidad te refieres a "más optimizado"? Para eso debo decirte que, dado que tienes los nombres de los productos hardcodeados en tus componentes es imposible. Lo lógico sería tener una "base de datos" (Puede perfectamente ser un .json con los datos ahí) y un único componente que reciba dicho JSON y pinte su html con cada "objeto" obtenido de la fuente de datos usando un *ngFor.
    – Benito-B
    el 24 may. 2022 a las 15:49
  • jajajaja, perfecto, perdon por la tardanza, voy a probar eso ahora mismo, sigo siendo un novato en esto de angular y quiero aprender lo mejor posible, gracias!
    – Puntoycoma
    el 25 may. 2022 a las 7:10

1 respuesta 1

0

Problema resuelto, para optimizar mucho mas mi código lo que he hecho ha sido crear un archivo mockup.ts donde almacenar todos los productos de mi tienda, hago un import dentro de mi modal.component.ts, para luego hacer la llamada a cada propiedad del producto en el modal.component.html, sacando cada uno de ellos con el *ngfor.

Adjunto mi codigo resuelto.

mock-articulos.ts

import { Articulo } from 'src/app/model/articulo';

export const ARTICULOS: Articulo[] = [
  {
    name:"Nokia 3310",
    description:"Movil Nokia 3310 listo para comprar a un precio bastante economico.",
    image:"/assets/img/movil.JPG"
  },
  {
    name:"BlackBerry Clásica",
    description:"Blackberry lista para comprar a un precio bastante economico.",
    image:"/assets/img/blackberry.jpg"
  },
  {
    name:"Disco de Vinilo",
    description:"Disco de Vinilo listo para comprar a un precio bastante economico.",
    image:"/assets/img/vinilo.png"
  }
];

modal.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { SwitchService } from '../service/switch.service';
import { ARTICULOS } from 'mock-articulos';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

  articulos = ARTICULOS;
}

modal.component.html

<h2>Mis productos</h2>
<ul class="Articulos">
  <li *ngFor="let articulo of articulos">
    <span class="badge">{{articulo.name}}</span>
    <span>{{articulo.description}}</span>
    <img src="{{articulo.image}}" alt="imagenes productos">
  </li>
</ul>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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