ExpressionChangedAfterItHasBeenCheckedError in Angular - Kaj, zakaj in kako popraviti?

ExpressionChangedAfterItHasBeenCheckedError je brez dvoma moja najljubša napaka pri kotnih aplikacijah.

Velikokrat sem naletel na to napako, ko sem prvič začel sodelovati s podjetjem Angular. Kot pravi GitHub, to počnejo tudi mnogi drugi.

Kdaj se bo ExpressionChangedAfterItHasBeenCheckedError vrgel?

Najpogostejši razlogi so:

  1. Izvajate kodo v programu AfterViewInit, kar se pogosto zgodi pri delu z ViewChildom, saj ni določeno, dokler ne pokličete AfterViewInit.
  2. DOM manipulirate neposredno (npr. Z uporabo jQuery). Kotni ne more vedno zaznati teh sprememb in pravilno odreagirati.
  3. Dogaja se lahko tudi zaradi dirkalnih pogojev, ko kličete funkcije znotraj svoje predloge HTML.

Kaj je ExpressionChangedAfterItHasBeenCheckedError, ki me poskuša opozoriti?

ExpressionChangedAfterItHasBeenCheckedError se vrže, ko se je izraz v vašem HTML-ju spremenil, potem ko ga je Angular preveril (gre za zelo izrazno napako).

Ta napaka se vrže samo v načinu razvoja in z dobrim razlogom; pogosto je znak, da morate ponovno spremeniti kodo, saj vas Angular opozarja, da se ta sprememba izraza ne bo izbrala pri omogočanju načina izdelave!

Eden od razlogov, zakaj je proizvodni način hitrejši od načina razvijanja, je ta, da Angular preskoči nekaj preverjanj (npr. Zaznavanje sprememb po AfterViewInit), ki se opravijo v načinu razvoja. To pomeni, da koda, ki bo v načinu razvoja delovala v redu, ne bo delovala v proizvodnem načinu.

Tu je primer, ki bi deloval v načinu razvoja, ne pa tudi v načinu proizvodnje:

Kako popraviti ExpressionChangedAfterItHasBeenCheckedError

Popravi eno

Za hitro odpravljanje se pogosto uporabljajo setTimeout ali ChangeDetectorRef, da napaka izgine.

Slednji je boljši, tako kot pri ChangeDetectorRef se preverja pogled komponent in njegovi otroci. Po drugi strani pa setTimeout povzroči, da Angular v celotni aplikaciji preveri spremembe, kar je precej dražje.

Popravi dva

Včasih je napako še lažje odpraviti - preprosto premaknite kodo na OnInit.

Razen, če se morate zanesti na ViewChild ali če se neka koda zažene šele, ko bo Angular popolnoma inicializiral pogled komponente, bo premik na OnInit rešil vašo težavo.

To je zato, ker bo Angular izvedel zaznavanje sprememb po OnInit v načinu proizvodnje in razvoja.

Popravi tri

Ne marate kotne magije in kako zazna spremembe? Preprosto onemogočite samodejno odkrivanje sprememb v komponenti in povejte Angularju, kdaj naj zazna spremembe.

ChangeDetectionStrategy lahko določite v dekoraterju komponent za OnPush. Zdaj bo Angular zaznal spremembe vnosa samodejno, ostalo pa je odvisno od vas.

Medtem ko je vključitev strategije TheOnPush manj čarovništva, pa tudi izboljšate zmogljivost, saj je za Angular manj dela. To je lahko koristno za optimizacijo velikih in zapletenih komponent.

Po drugi strani pa morate poskrbeti, da boste lahko Angular pobrali spremembe. Če tega ne storite, boste običajno videli napake v uporabniškem vmesniku (npr. Modal ne izgine).

Zato tega ne uporabljajte previdno, ne da bi temeljito preverili svojo komponento.

Zaključek

Zdaj bi morali razumeti, kdaj in zakaj se pojavlja zloglasni ExpressionChangedAfterItHasBeenCheckedError.

Kot lahko vidite, obstaja več načinov za reševanje te napake. Prepričajte se, da dejansko rešite resnično osnovno težavo, namesto da bi se ukvarjali z njo.