ExpressionChangedAfterItHasBeenCheckedError in Angular - ماذا ، لماذا وكيف لاصلاحها؟

ExpressionChangedAfterItHasBeenCheckedError هو بلا شك خطأي المفضل في التطبيقات الزاوية.

لقد واجهت هذا الخطأ كثيرًا عندما بدأت العمل مع Angular لأول مرة. وفقا لجيثب ، وكذلك العديد من الآخرين.

متى سيتم طرح ExpressionChangedAfterItHasBeenCheckedEror؟

الأسباب الأكثر شيوعًا هي:

  1. إنك تنفذ التعليمات البرمجية في AfterViewInit والتي تحدث غالبًا عند العمل مع ViewChild ، حيث إنها غير محددة حتى يتم استدعاء AfterViewInit.
  2. أنت تتعامل مع DOM مباشرة (على سبيل المثال باستخدام jQuery). الزاوي لا يمكن دائمًا اكتشاف هذه التغييرات والرد عليها بشكل صحيح
  3. يمكن أن يحدث ذلك أيضًا بسبب ظروف السباق عند استدعاء وظائف داخل قالب HTML الخاص بك.

ما هو ExpressionChangedAfterItHasBeenCheckedError يحاول تحذير لي حول؟

يتم طرح ExpressionChangedAfterItHasBeenCheckedError عندما يتم تغيير تعبير في HTML الخاص بك بعد أن قام Angular بمراجعته (إنه خطأ تعبيري للغاية).

يتم طرح هذا الخطأ فقط في وضع التطوير ولسبب وجيه ؛ غالبًا ما تكون هذه علامة على أنه يجب عليك إعادة تشكيل الكود الخاص بك ، حيث يحذرك Angular من أن هذا التغيير في تعبيرك لن يتم التقاطه عند تمكين وضع الإنتاج!

أحد الأسباب التي تجعل وضع الإنتاج أسرع من وضع التطوير ، وهو أن Angular يتخطى بعض الفحوصات (مثل اكتشاف التغيير بعد AfterViewInit) التي تتم في وضع التطوير. هذا يعني أن الشفرة التي ستعمل بشكل جيد في وضع التطوير لن تعمل في وضع الإنتاج.

إليك مثال يعمل بشكل جيد في وضع التطوير ولكن ليس في وضع الإنتاج:

كيفية إصلاح ExpressionChangedAfterItHasBeenCheckedError

إصلاح واحد

كحل سريع ، غالبًا ما يتم استخدام setTimeout أو ChangeDetectorRef لإخفاء الخطأ.

هذا الأخير هو الأفضل ، كما هو الحال مع ChangeDetectorRef يتم التحقق من عرض المكون وأطفاله. من ناحية أخرى ، سيتسبب setTimeout في أن يقوم Angular بالتحقق من التطبيق بالكامل بحثًا عن التغييرات ، وهو ما يكون أكثر تكلفة.

إصلاح اثنين

في بعض الأحيان ، يكون إصلاح الخطأ أسهل - ما عليك سوى نقل الرمز إلى OnInit.

ما لم يكن عليك الاعتماد على ViewChild ، أو إذا كان يجب تشغيل بعض التعليمات البرمجية فقط بعد أن تقوم Angular بتهيئة عرض أحد المكونات بالكامل ، فإن الانتقال إلى OnInit سيحل مشكلتك.

وذلك لأن Angular ستقوم بالكشف عن التغيير بعد OnInit في كل من وضع الإنتاج والتطوير.

إصلاح ثلاثة

ألا تحب السحر الزاوي وكيف يكتشف التغييرات؟ فقط قم بتعطيل اكتشاف التغيير التلقائي في المكون الخاص بك وأخبر Angular بنفسك متى يجب اكتشاف التغييرات.

يمكن تحديد ChangeDetectionStrategy في أداة إنشاء مكون إلى OnPush. الآن ، سوف تكتشف Angular تغييرات الإدخال تلقائيًا ، والباقي يعود إليك.

على الرغم من وجود سحر أقل من خلال تمكين استراتيجية theOnPush ، يمكنك أيضًا الحصول على أداء محسّن نظرًا لوجود عمل أقل من Angular للقيام به. يمكن أن يكون هذا مفيدًا في تحسين المكونات الكبيرة والمعقدة.

من ناحية أخرى ، تحتاج إلى التأكد من السماح لـ Angular بالتقاط التغييرات. إذا لم تقم بذلك ، فستشاهد عادةً أخطاء واجهة المستخدم (مثل مشروط لا تختفي).

لذلك ، لا تطبق هذا بشغف دون التحقق من المكون الخاص بك بدقة.

خاتمة

يجب أن تكون قادرًا الآن على فهم متى ولماذا يحدث ExpressionChangedAfterItHasBeenCheckedError الشرير.

كما ترون ، هناك طرق متعددة للتعامل مع هذا الخطأ. فقط تأكد من أنك تقوم بالفعل بحل المشكلة الأساسية الحقيقية ، بدلاً من حلها.