ExpressionChangedAfterItHasBeenCheckedError szögben - mi, miért és hogyan javítható?

Az ExpressionChangedAfterItHasBeenCheckedError kétségkívül a szögletes alkalmazások kedvenc hibája.

Sokat találkoztam ezzel a hibával, amikor először elkezdtem dolgozni az Angular-val. A GitHub szerint ugyanúgy, mint sokan.

Mikor dobják el az ExpressionChangedAfterItHasBeenCheckedError fájlt?

A leggyakoribb okok a következők:

  1. A kódot az AfterViewInit programban hajtja végre, ami gyakran fordul elő, amikor a ViewChild-rel dolgozik, mivel addig nincs meghatározva, amíg az AfterViewInit meg nem hívódik.
  2. Közvetlenül manipulálja a DOM-ot (például a jQuery használatával). A szög nem mindig képes észlelni ezeket a változásokat és megfelelően reagálni.
  3. Ez akkor is megtörténhet, ha versenyfeltételek vannak, amikor funkciókat hív be a HTML sablonba.

Mi az ExpressionChangedAfterItHasBeenCheckedError próbál figyelmeztetni rám?

Az ExpressionChangedAfterItHasBeenCheckedError akkor dobódik el, ha a HTML-kifejezés megváltozott, miután Angular ellenőrizte (ez nagyon kifejező hiba).

Ezt a hibát csak fejlesztési módban és jó okból dobják el; gyakran jele annak, hogy újra kell reagálnia a kódjára, mivel Angular figyelmezteti Önt, hogy a kifejezés változását a termelési mód engedélyezésekor nem veszik figyelembe!

Az egyik ok, amiért a termelési mód gyorsabb, mint a fejlesztési mód, az, hogy a Szög átugorja az ellenőrzéseket (például a változások észlelése után AfterViewInit után), amelyeket fejlesztési módban hajtanak végre. Ez azt jelenti, hogy a fejlesztési módban jól működő kód nem fog működni a termelési módban.

Íme egy példa, amely kiválóan működne fejlesztési módban, de nem termelési módban:

Az ExpressionChangedAfterItHasBeenCheckedError javítása

Javítsd meg

Gyors javításként a setTimeout vagy a ChangeDetectorRef fájlokat gyakran használják a hiba eltűnésére.

Ez utóbbi jobb, mint a ChangeDetectorRef esetében, az összetevő nézetét és annak gyermekeit ellenőrzik. Másrészt, a setTimeout miatt Angular ellenőrzi a teljes alkalmazást a változások ellen, ami sokkal drágább.

Rögzítsen kettőt

Időnként a hibát még könnyebb kijavítani - csak helyezze át a kódot az OnInit-re.

Ha nem kell a ViewChild-re támaszkodnia, vagy ha valamelyik kód csak akkor fut, ha az Angular teljes mértékben inicializálta az összetevő nézetét, akkor az OnInit-re való áthelyezéssel megoldódik a probléma.

Ennek oka az, hogy a Angular az OnInit után is végrehajtja a változások észlelését, mind a gyártás, mind a fejlesztés módban.

Javíts meg három

Nem tetszik a szögmágia, és hogyan érzékeli a változásokat? Csak kapcsolja ki az automatikus változás-észlelést az összetevőben, és mondja el magának az Angular-nak, mikor kell észlelnie a változásokat.

A ChangeDetectionStrategy az OnPush komponensdekorátorában adható meg. A Szög csak automatikusan érzékeli a bemeneti változásokat, és a többi rajtad múlik.

Noha a mágia kevésbé rejlik az On-push stratégia engedélyezésével, ugyanakkor javul a teljesítmény, mivel kevesebb munka van a Szögletes feladatok elvégzéséhez. Ez hasznos lehet a nagy és összetett alkatrészek optimalizálásában.

Másrészt, ellenőriznie kell, hogy hagyja-e a Szög változtatásokat. Ha nem, akkor általában a felhasználói felület hibáit fogja látni (pl. A modál nem tűnik el).

Tehát ne alkalmazza ezt a lelkesedést anélkül, hogy alaposan ellenőrizné az alkatrészt.

Következtetés

Most meg kell értenie, hogy mikor és miért fordul elő a hírhedt ExpressionChangedAfterItHasBeenCheckedError.

Mint láthatja, többféle módon kezelheti ezt a hibát. Csak győződjön meg arról, hogy ténylegesen megoldotta-e a valódi mögöttes problémát, ahelyett, hogy megkerülné.