es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Pasar un objeto enorme de un componente padre a un componente hijo

31 Jul, 2023 Programación

Estoy refactorizando un código en el que quiero pasar varias propiedades a un componente hijo reutilizable, pero sin utilizar demasiadas entradas (que es el problema actual).

El problema es que, incluso con mi enfoque actual, el código HTML se ve descuidado debido a la transferencia de un objeto enorme (a continuación se muestra solo un ejemplo. El objeto puede ser más grande ya que hay muchas propiedades que se deben pasar al hijo).

Mi código se ve algo así:

<app-parent>
  <ul>
    <li *ngfor="let prop of props">
      <app-child [childprops]="{'template':'parent1', 'iconName':prop.type | propIcon, 'showIcon':true}">
    </app-child></li>
  </ul>
</app-parent>

¿Existe un enfoque alternativo que siga las mejores prácticas y al mismo tiempo haga que el código sea más legible?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay un enfoque alternativo que sigue las mejores prácticas y hace que el código sea más legible. Una forma de lograr esto es utilizando un servicio para compartir los datos entre los componentes padre e hijo. El componente padre puede inyectar el servicio y establecer las propiedades que deben ser compartidas, mientras que el componente hijo también puede inyectar el servicio y acceder a las propiedades compartidas.

    Aquí tienes un ejemplo:

    1. Crea un servicio compartido:
    import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  public template: string;
  public iconName: string;
  public showIcon: boolean;
}
    1. En el componente padre, inyecta el servicio compartido y establece las propiedades:
    import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-parent',
  template: `
    <ul>
      <li *ngfor="let prop of props">
        <app-child></app-child>
      </li>
    </ul>
  `
})
export class ParentComponent {
  props = [
    { type: 'type1' },
    { type: 'type2' },
    { type: 'type3' }
  ];

  constructor(private sharedService: SharedService) {
    this.sharedService.template = 'parent1';
    this.sharedService.showIcon = true;
  }
}
    1. En el componente hijo, inyecta el servicio compartido y accede a las propiedades:
    import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-child',
  template: `
    <div>
      Template: {{ sharedService.template }}
      Nombre del ícono: {{ iconName }}
      Mostrar ícono: {{ sharedService.showIcon }}
    </div>
  `
})
export class ChildComponent {
  constructor(public sharedService: SharedService) {}

  get iconName() {
    return this.sharedService.iconName + '-icon';
  }
}

    Con este enfoque, solo se comparten las propiedades necesarias entre los componentes padre e hijo, y el código es más legible y fácil de mantener.

Comments are closed.