Question

0

118

Vistas

Mejores prácticas de creación de componentes angulares

A menudo tengo dudas cuando quiero un nuevo comportamiento de un componente.

Hagamos un ejemplo simple, tengo el componente <app-title> :

 <div> <h1>{{title}}</h1> </div>

Algún tiempo después, dentro de otra página necesito poner un botón al lado del título. El problema es, ¿debo crear un nuevo componente de title o debo parametrizar el existente?

Puedo editar <app-title> para que se vea así:

 export class AppTitleComponent implements OnInit { @Input() showButton: boolean; title = 'App title'; constructor() {} ngOnInit() {} }

 <div> <h1>{{title}}</h1> <button *ngIf="showButton">{{buttonTitle}}</button> </div>

Este es un ejemplo simple y puede ser obvio, pero al usar Angular siempre tengo este problema, piense en componentes complejos: el @Input() se volvería mucho usando este método, pero crear un nuevo componente aumentaría los archivos y la complejidad.

A partir de este ejemplo, podría decir que cree dos componentes, uno para el título y otro para el botón, pero eso es solo porque este es un caso muy simple. Piense en cambiar un componente del modo "compacto" a "expandido" y viceversa. Por un lado, es posible que necesite tener el componente grande y, por otro lado, tener un tamaño más pequeño y mostrar menos información.

¿Existe alguna directriz al respecto?

Gracias

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-05T07:45:35.238Z

Creo que es importante pensar en el comportamiento dentro del contexto de su componente. ¿El botón es fundamental para el comportamiento del componente del título? ¿Tiene sentido no solo mostrar el botón, sino también manejar sus eventos dentro del contexto del componente del título? Si la respuesta es no, entonces en algún nivel granular dividiría los componentes.

Aquí hay algunas otras cosas que puede considerar:

Anticipando que su componente de título puede necesitar algo de contenido envuelto con el título, puede usar la transclusión:

 <div> <h1>{{title}}</h1> <ng-content></ng-content> </div>

Entonces, en el padre, harías algo como esto:

 <div> <app-title-component title='title'> <button>Some Button Text</button> </app-title-component> </div>

Podría escribir un componente contenedor que empaquete el título y el botón juntos... es decir:

 <div> <app-title-component></app-title-component> <button>Some Button Text</button> </div>

Podría, como se sugiere, parametrizar la configuración. Recomiendo pensar si el comportamiento que está parametrizando es parte del comportamiento central del componente. Por ejemplo, si desea parametrizar si una leyenda se muestra o no en un gráfico, eso tiene sentido porque la leyenda es una característica central del gráfico. Pero probablemente no parametrizaría si el gráfico debe ser seguido o no por una hoja de datos sin procesar. En su lugar, crearía un nuevo componente para eso y los representaría en secuencia, porque la hoja de datos no es parte del comportamiento central del gráfico, aunque a veces me gustaría ponerlos uno al lado del otro.

Al final del día, debe pensar en la decisión en términos de su aplicación, la usabilidad futura de su aplicación y la facilidad para el desarrollador (por ejemplo, ¿tendrá sentido para un futuro desarrollador que este botón esté empaquetado con el título).

Espero que encuentres esto útil.

0

118

Mejores prácticas de creación de componentes angulares

1 Respuestas

0

Encuentra empleos remotos

Andres GPT