Pasar un objeto enorme de un componente padre a un componente hijo
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?
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:
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.