ExpressionChangedAfterItHasBeenCheckedError in Angular - Što, zašto i kako to popraviti?

ExpressionChangedAfterItHasBeenCheckedError je bez sumnje moja omiljena pogreška u kutnim aplikacijama.

Mnogo sam se susreo s ovom pogreškom kada sam prvi put počeo raditi s tvrtkom Angular. Prema GitHub-u, isto tako čine i mnogi drugi.

Kada će se Izraziti promijenjen nakon što je uhvaćen bhakta provjeren?

Najčešći razlozi su:

  1. U AfterViewInit izvršavate kôd, što se često događa pri radu s ViewChild-om, jer je nedefinirano dok se ne pozove AfterViewInit.
  2. Manipulirate izravno s DOM-om (npr. Pomoću jQuery). Kutni ne može uvijek otkriti ove promjene i pravilno reagirati.
  3. To se može dogoditi i zbog uvjeta utrke kada pozivate funkcije unutar HTML predloška.

Što je izraz ExpressionChangedAfterItHasBeenCheckedError koji me pokušava upozoriti?

ExpressionChangedAfterItHasBeenCheckedError se baca kada se izraz u vašem HTML-u promijenio nakon što ga je Angular provjerio (riječ je o izrazito pogreškoj).

Ova se pogreška baca samo u načinu razvoja i s dobrim razlogom; to je često znak da biste trebali ponovo korigovati svoj kôd, jer vas Angular upozorava da se ta promjena vašeg izraza neće pokupiti prilikom omogućavanja načina proizvodnje!

Jedan od razloga zašto je način proizvodnje brži od načina razvijanja jest taj što Angular preskače neke provjere (npr. Otkrivanje promjena nakon AfterViewInit) koje se provode u načinu razvoja. To znači da kôd koji će raditi u načinu razvoja neće raditi u načinu proizvodnje.

Evo primjera koji bi funkcionirao u načinu razvoja, ali ne iu načinu proizvodnje:

Kako popraviti ExpressionChangedAfterItHasBeenCheckedError

Popravi jedno

Kako brzo popraviti, setTimeout ili ChangeDetectorRef često se koriste kako bi pogreška nestala.

Potonji je bolji, kao i kod ChangeDetectorRef provjerava se komponentni prikaz i njegova djeca. S druge strane, setTimeout će uzrokovati Angular da provjeri čitavu aplikaciju zbog promjena, što je znatno skuplje.

Popravi dva

Ponekad je pogrešku još lakše ispraviti - samo premjestite kôd na OnInit.

Ako se ne morate pouzdati u ViewChild ili ako se neki kôd pokrene tek nakon što je Angular potpuno inicijalizirao pregled komponente, prelazak na OnInit riješit će vaš problem.

To je zato što će Angular obaviti otkrivanje promjena nakon OnInit u načinu proizvodnje i razvoja.

Popravite tri

Ne sviđa vam se uglana magija i kako otkriva promjene? Samo onemogućite automatsko otkrivanje promjena u komponenti i recite Angularu kada treba otkriti promjene.

ChangeDetectionStrategy može se odrediti u komponenti ukras za OnPush. Sada će Angular automatski otkriti promjene unosa, a ostalo ovisite o vama.

Iako je manje čarolije uključeno u omogućavanje theOnPush strategije, također dobivate poboljšane performanse jer Angular ima manje posla. Ovo može biti korisno za optimizaciju velikih i složenih komponenti.

S druge strane, morate biti sigurni da ste dozvolili da Angular pokupi promjene. Ako to ne učinite, obično ćete vidjeti pogreške UI (npr. Modal koji ne nestaje).

Dakle, nemojte ovo primjenjivati ​​s nestrpljenjem bez temeljite provjere svoje komponente.

Zaključak

Sada biste mogli razumjeti kada se i zašto događa zloglasni ExpressionChangedAfterItHasBeenCheckedError.

Kao što vidite, postoji više načina za rješavanje ove pogreške. Samo budite sigurni da zapravo rješavate pravi temeljni problem, umjesto da radite oko toga.