¿Qué nos permite hacer Angular Ivy específicamente con respecto a la detección manual de cambios?

8

Este artículo menciona que

Sin embargo, Ivy abre algunas posibilidades para el futuro. Ahora debería ser posible ejecutar una aplicación sin zone.js, y manejar semi-manualmente la detección de cambios (un poco como lo haría con React). Estas API ya existen pero son experimentales, no están documentadas y probablemente cambiarán en un futuro cercano.

Creo que ya era posible ejecutar una aplicación sin zone.js antes de Ivy. ¿Ivy permite manejar semi-manualmente la detección de cambios? ¿Dónde están esas API experimentales? Cualquier documento? ¿Ivy todavía usa zone.js?

Mi objetivo es limitar las detecciones de cambios al mínimo activándolas manualmente. ¿Cuál es la mejor opción para hacer eso? Específicamente, cuál es la mejor opción cuando se usa Ivy.

maximedupre
fuente

Respuestas:

10

Ese es un gran tema para cubrir aquí, pero intentaré responder.

La idea es representar componentes sin declararlos dentro de ningún módulo.

¿Por qué querríamos hacer algo así? Es simple: los módulos son mucho más que componentes. Los módulos tienen zonas, proveedores, inyectores, DI y mucho más. Los módulos para muchos de nosotros representan aplicaciones. Y a veces solo queremos crear un componente simple y representarlo en otro componente.

¿Cuál es el problema que causará? Los módulos son los que configuran zonas para nosotros. Las zonas son las que activan la detección de cambios automáticamente. Si renderizamos un componente fuera de un módulo, no tendremos detección automática de cambios.

Entonces, con Ivy, tenemos algunos nuevos APIS que pueden ayudarnos:

ɵrenderComponent() - Eso puede representar un componente sin declararlo en un módulo.

ɵdetectChanges();- Para activar la detección de cambios manualmente, pero es solo una función de @angular/corey ya no necesita la DI para inyectar elChangeDetectorRef

ɵmarkDirty() - Para marcar el componente para verificar en el próximo ciclo de detección de cambios.

ɵɵdirectiveInject() - Inyecte un InjectionToken en una cuestión de función, sin usar el constructor.

Si pregunta cuál es este ɵsigno que antepone todas esas API nuevas, eso significa que esas funciones aún son experimentales y que aún no debe usarlas para la producción. Y también es por eso que no están documentados.

Para su pregunta: si desea minimizar el uso de CD en sus componentes, simplemente renderícelos con renderComponentfunción y maneje el CD usted mismo.

Si desea leer más, escribí una publicación de blog completa sobre este tema, que incluye muchos ejemplos de código. Puede encontrarlo aquí: " El futuro de los componentes independientes en los días posteriores al lanzamiento de Ivy "

También di una charla al respecto en NG-DE 2019 - " Bye Bye NgModules "

Eliran Eliassy
fuente