Me pregunto cuál de los siguientes es mejor.
<my-component [data]="settings"></my-component>o
<my-component [bar]="settings.foo.bar" [baz]=settings.baz"></my-component>Y el objeto de configuración se vería así
this.settings = { foo: { bar: 10 } baz: 2 }; La primera forma es compacta, pero menos explícita sobre lo que necesita my-component . Puedo imaginar que hay situaciones en las que podría ser mejor pasar objetos completos a un componente (si hay demasiadas propiedades, por ejemplo). Y qué decir del rendimiento. Puedo imaginar que la detección de cambios es más difícil y de menor rendimiento si pasa objetos completos. ¡Cualquier ayuda/consejo con respecto a este tema sería apreciada!
Creo que especificar valores individuales es un mejor enfoque. Como escribió, es más explícito sobre lo que necesita y puede especificar los valores de otras fuentes (no solo el objeto de configuración). De esta manera, la detección de cambios es fácil y su componente puede optimizarse usando
@Component({ changeDetection: ChangeDetectionStrategy.OnPush }) Usando la estrategia OnPush , Angular omitirá la detección de cambios para el subárbol del componente si ninguno de sus valores de entrada cambió.
Para más información ver
En lo que respecta a mi experiencia, la prioridad en el desarrollo de software front-end hoy en día debería ser la legibilidad del código. Como en términos de rendimiento la diferencia es despreciable, optaría por la primera opción, donde claramente pasas un solo objeto de settings . Al leer la página .html, no hay interés en profundizar más aquí; el 'lector' puede ver la estructura de su variable en otro lugar del script.
La mejor opción es la primera. El código HTML es más conciso, cuando alguien necesite averiguar cuál es la configuración, entonces no hay problema para saltar al archivo ts. Los tipos de texto mecanografiado son una buena forma de identificar objetos, por lo que no es necesario pasar las propiedades por separado.