جافا سكريبت للمبتدئين: تعيين فئات ديناميكية باستخدام ngClass

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

تعيين فئة CSS باستخدام [className] الربط الخاص property binding

على الرغم من أن هذه المقالة تتعلق بتوجيه ngClass، فإنه من الجدير بالذكر أنه، في كثير من الحالات، لن تحتاج إليه على الإطلاق! بفضل الربط الخاص [className]، يمكننا تعيين فئة عبر خاصية className الأصلية في JavaScript، باستخدام صيغة الربط []. يمكننا تنفيذ أي عبارة داخل ذلك الربط تؤدي إلى سلسلة نصية. وهذا يتيح لنا تعيين فئة واحدة أو أكثر بناءً على شرط:

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

يمكننا أيضًا بناء اسم الفئة في وقت التشغيل:

<div [className]="'class' + someValue"></div>

اقرأ: 5 مفاهيم في JavaScript يجب أن يتعلمها كل مطور ويب

تبديل الفئة عبر [className]  الربط الخاص property binding

يعتبر بعض الأشخاص أن تقنية تبديل الفئات المذكورة أعلاه أكثر تعقيدًا مما ينبغي، حيث أن inactive-class ستكون على الأرجح هي الفئة الافتراضية. إذا كنت من هذا المعسكر، يمكنك استخدام صيغة [class.class-name] لتقديم شرط سيتم تقييمه:

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

لذا، إذا كان بإمكاننا تعيين فئة بشكل شرطي باستخدام [className] لربط الخصائص، فلماذا نحتاج إلى توجيه ngClass؟ كما سنرى، السبب الحقيقي لاستخدام توجيه ngClass هو أنه يمكن أن يساعدنا في الاختيار بين فئات متعددة.

الغوص العميق في توجيه ngClass

قبل أن نتعمق في كيفية استخدام توجيه ngClass، سيكون من المفيد النظر في تعريفه:

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

عند النظر إلى الكود أعلاه، يمكننا الآن أن نرى أن صيغة [class] التي استخدمناها سابقًا هي في الواقع جزء من توجيه ngClass، عبر @Input('class'). ولاحظ أيضًا أن توجيه ngClass يوفر لنا أربع خيارات على الأقل لتعيين الفئات الديناميكية!

لنلقِ نظرة على كل واحد من هذه الخيارات بمزيد من التفصيل.

توفير سلسلة أو سلسلة[]

تعيين سلسلة أو مصفوفة من السلاسل إلى ngClass يسمح لنا بربط الفئات الديناميكية بمتغيرات Angular. لنفترض أن لدينا متغير يسمى activeClass. داخل ملف .ts الخاص بنا، يمكننا تعيينه إلى اسم فئة معروف مثل "text-success" أو "text-failure" بناءً على نتيجة بعض العمليات:

<div 
  [ngClass]="activeClass">
</div>

تكون صيغة المصفوفة مفيدة لتطبيق فئات متعددة على نفس العنصر أو المكون:

<div 
  [ngClass]="[activeClass, openClass]">
</div>

باستخدام تعبير مقيم

طريقة أكثر تقدمًا – ولكن ذات فائدة عالية – لاستخدام ngClass هي تقديم تعبير. يتم تطبيق الفئة المقدمة فقط إذا كانت المتغير أو التعبير يُقدّر إلى true. لتقديم تعبير، يجب عليك توفير كائن باستخدام الأقواس المنحنية {}. إلى يسار كل نقطتين – اسم الخاصية – هو الفئة التي سيتم تطبيقها؛ إلى يمين النقطتين – قيمة الخاصية – هو التعبير أو المتغير الذي تريد تقييمه. إليك مثال:

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

Read: React، Angular، و Vue.js: ما هو الاختلاف التقني؟

استخدام عامل الاختيار المثلث

عامل الاختيار المثلث يتيح لك تعيين قيمة لمتغير بناءً على تعبير بولياني – إما حقل بولياني، أو عبارة تقوم بتقييمها إلى نتيجة بوليانية. في أبسط حالاته، يمكن استخدام عامل الاختيار المثلث، المعروف أيضًا باسم العامل الشرطي، كبديل لعبارة if/then/else عند تعيين متغير.

تزويد عامل الاختيار المثلث لـ ngClass يسمح لنا بتحديد فئتين مختلفتين: واحدة إذا كان التعبير صحيحًا وواحدة للخطأ. هنا هو الصيغة الأساسية لعامل الاختيار المثلث:

[ngClass]="expression or variable ? true class : false class"

هنا بعض الشيفرة التي تستخدم عامل الاختيار المثلث لتعيين فئة DIV بناءً على ما إذا كان اثنان من المتغيرات متساويان أم لا:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

توقيع Set<string> ngClass: غير مرغوب فيه وغير محبوب

تعتبر مجموعة (Set) هي هيكل بيانات جديد تم إدخاله في ES6، مشابهة للخريطة (Map). تسمح لنا مجموعة TypeScript بتخزين قيم متميزة في قائمة باستخدام طرق مثل add()، has()، و delete(). لسبب ما، توقيع Set<string> لـ ngClass لم يحظى حقًا بشهرة كبيرة. لم أستخدمه أبدًا، ولا أعرف أي شخص قد استخدمه.

ومع ذلك، يجب أن تحتوي المجموعة (Set) على سلاسل نصية تمثل أسماء الفئات التي يجب تطبيقها على العنصر أو المكون. إليك بعض الشيفرة TypeScript التي تنشئ مجموعة (Set) تحمل اسم classes:

// قم بتعريف متغير عضو Class
public classes = new Set();
 
// إضافة أسماء الفئات
classes.add('active').add('text-large');

الاستنتاج

في هذا البرنامج التعليمي، تناولنا بعض الطرق الأكثر شيوعًا لتعيين فئة CSS بشكل ديناميكي لعنصر باستخدام التوجيه ngClass. كما يمكنك ملاحظة، إنها أمور قوية جدًا.