Was erlaubt uns Angular Ivy speziell in Bezug auf die manuelle Änderungserkennung?

8

Dieser Artikel erwähnt das

Ivy eröffnet jedoch einige Möglichkeiten für die Zukunft. Es sollte jetzt möglich sein, eine Anwendung ohne zone.js auszuführen und die Änderungserkennung halbmanuell durchzuführen (ähnlich wie bei React). Diese APIs existieren bereits, sind jedoch experimentell, nicht dokumentiert und werden sich wahrscheinlich in naher Zukunft ändern.

Ich denke, es war bereits vor Ivy möglich, eine Anwendung ohne zone.js auszuführen. Ermöglicht Ivy die halbmanuelle Handhabung der Änderungserkennung? Wo sind diese experimentellen APIs? Irgendein Dokument? Verwendet Ivy noch zone.js?

Mein Ziel ist es, Änderungserkennungen durch manuelles Auslösen auf ein Minimum zu beschränken. Was ist die beste Option, um das zu tun. Insbesondere was ist die beste Option bei der Verwendung von Ivy.

maximiert
quelle

Antworten:

10

Das ist ein großes Thema, das hier behandelt werden muss, aber ich werde versuchen, es zu beantworten.

Die Idee ist, Komponenten zu rendern, ohne sie in einem Modul zu deklarieren.

Warum sollten wir so etwas tun wollen? Es ist einfach - Module sind viel mehr als nur Komponenten. Module haben Zonen, Anbieter, Injektoren, DI und vieles mehr. Module für viele von uns repräsentieren Anwendungen. Und manchmal möchten wir einfach eine einfache Komponente erstellen und in einer anderen Komponente rendern.

Was ist das Problem, das es verursachen wird? Module sind diejenigen, die Zonen für uns einrichten. Zonen sind diejenigen, die die Änderungserkennung automatisch auslösen. Wenn wir eine Komponente außerhalb eines Moduls rendern, haben wir keine automatische Änderungserkennung.

Mit Ivy haben wir also ein paar neue APIS, die uns helfen können:

ɵrenderComponent() - Das kann eine Komponente rendern, ohne sie in einem Modul zu deklarieren.

ɵdetectChanges();- Um die Änderungserkennung manuell auszulösen, ist dies jedoch nur eine Funktion von @angular/coreund Sie benötigen den DI nicht mehr, um den zu injizierenChangeDetectorRef

ɵmarkDirty() - Um die Komponente zu markieren, die im nächsten Änderungserkennungszyklus überprüft werden soll.

ɵɵdirectiveInject() - Injizieren Sie ein InjectionToken in eine Funktionssache, ohne den Konstruktor zu verwenden.

Wenn Sie fragen, was dieses ɵZeichen ist, das all diesen neuen APIs vorangestellt ist, bedeutet dies, dass diese Funktionen noch experimentell sind und Sie sie noch nicht für die Produktion verwenden sollten. Und deshalb sind sie auch nicht dokumentiert.

Für Ihre Frage: Wenn Sie die Verwendung von CD in Ihren Komponenten minimieren möchten, rendern Sie sie einfach mit renderComponentFunktion und bearbeiten Sie die CD selbst.

Wenn Sie mehr lesen möchten, habe ich einen vollständigen Blog-Beitrag genau zu diesem Thema geschrieben, einschließlich vieler Codebeispiele. Sie finden es hier - " Die Zukunft eigenständiger Komponenten in Post-Ivy-Veröffentlichungstagen "

Ich habe auch in NG-DE 2019 einen Vortrag darüber gehalten - " Bye Bye NgModules "

Eliran Eliassy
quelle