O que o Angular Ivy nos permite fazer especificamente em relação à detecção manual de alterações?

8

Este artigo menciona que

Ivy abre algumas possibilidades para o futuro. Agora deve ser possível executar um aplicativo sem zone.js e manipular semi-manualmente a detecção de alterações (um pouco como você faria com o React). Essas APIs já existem, mas são experimentais, não documentadas e provavelmente serão alteradas no futuro próximo.

Eu acho que já era possível executar um aplicativo sem zone.js antes do Ivy. Ivy permite manipular semi-manualmente a detecção de alterações? Onde estão essas APIs experimentais? Qualquer documento? O Ivy ainda usa o zone.js?

Meu objetivo é limitar ao mínimo as detecções de alterações, acionando-as manualmente. Qual é a melhor opção para fazer isso. Especificamente, qual é a melhor opção ao usar o Ivy.

maximedupre
fonte

Respostas:

10

Esse é um tópico enorme para abordar aqui, mas tentarei responder.

A ideia é renderizar componentes sem declará-los dentro de qualquer módulo.

Por que nós queremos fazer algo assim? É simples - os módulos são muito mais do que apenas componentes. Os módulos têm zonas, provedores, injetores, DI e muito mais. Módulos para muitos de nós representam aplicativos. E, às vezes, apenas queremos criar um componente simples e renderizá-lo em outro componente.

Qual é o problema que isso causará? Módulos são quem cria zonas para nós. São as zonas que acionam a detecção de alterações automaticamente. Se renderizarmos um componente fora de um módulo, não teremos detecção automática de alterações.

Portanto, com Ivy, temos alguns novos APIS que podem nos ajudar:

ɵrenderComponent() - Isso pode renderizar um componente sem declará-lo em um módulo.

ɵdetectChanges();- Para acionar a detecção de alterações manualmente, mas é apenas uma função @angular/coree você não precisa mais do DI para injetar oChangeDetectorRef

ɵmarkDirty() - Para marcar o componente para verificar o próximo ciclo de detecção de alterações.

ɵɵdirectiveInject() - Injete um InjectionToken em uma questão de função, sem usar o construtor.

Se você perguntar qual é esse ɵsinal que prefixa todas as novas APIs, isso significa que essas funções ainda são experimentais e você ainda não deve usá-las para produção. E é também por isso que eles não estão documentados.

Para sua pergunta - se você quiser minimizar o uso de CD em seus componentes, apenas processe-os com renderComponentfunção e lide com o CD sozinho.

Se você quiser ler mais, escrevi um post completo sobre exatamente esse tópico, incluindo muitos exemplos de código. Você pode encontrá-lo aqui - " O futuro dos componentes autônomos nos dias de lançamento pós Ivy "

Também dei uma palestra sobre isso no NG-DE 2019 - " Bye Bye NgModules "

Eliran Eliassy
fonte