JavaScript עבור מתחילים: הקצאת Class דינמי עם ngClass

ביישומי אינטרנט, דרישה נפוצה היא להתאים את המראה של אלמנט על בסיס תנאי. ישנן כמה דרכים להשיג זאת, אבל אם אתה עובד עם אנגולר, הבחירה שלך ברורה. המדריך ngClass מספק שפע של דרכים להקצות דינמית שמות מחלקות לאלמנטים או רכיבים. הסינטקס שלו גם תמציתי וגם תומך בלוגיקה יחסית מורכבת כדי לספק לנו שליטה מדויקת על שמות המחלקות שלנו כמו גם על הקריטריונים לקביעתן. במדריך זה, נעבור על כמה מהדרכים הנפוצות ביותר להקצות דינמית מחלקת CSS לאלמנט באמצעות המדריך ngClass.

הקצאת מחלקת CSS באמצעות [className] חיבור רכוש

אף על פי שהמאמר הזה עוסק במדריך ngClass, שווה לציין שבמקרים רבים, אפילו לא תצטרך אותו! בזכות חיבור רכוש [className], אנו יכולים לקבוע מחלקה דרך רכוש ה-JavaScript המקורי className, באמצעות סינטקס החיבור []. אנו יכולים לבצע כל הצהרה בתוך החיבור הזה שמביאה לתוצאה של מחרוזת. זה מאפשר לנו לקבוע מחלקות אחת או יותר על בסיס תנאי:

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

אנו יכולים גם לבנות את שם המחלקה בזמן ריצה:

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

קרא: 5 מושגי JavaScript שכל מפתח אינטרנט צריך ללמוד

החלפת מחלקות באמצעות [className] חיבור רכוש

ישנם אלו שחושבים כי טכניקת ההחלפה של המחלקה למעלה קצת יותר מורכבת ממה שצריך להיות מאשר ש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. בתוך קובץ ה-tׂפריפטים שלנו, נוכל להגדיר אותו לשם מחלקה ידועה כמו "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 }">

קרא: 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'">

החתימה ngClass של Set: לא רצויה ולא נאהבת

הַ Set הוּא מבנה נתונים חדש שהוכנס ב-ES6, דומה ל- Map. Set ב- typescript מאפשר לנו לאחסן ערכים ייחודיים ברשימה באמצעות שיטות כגון add(), has(), ו־delete(). מסיבה כלשהי, חתימת ה- Set<string> של ngClass לא הצליחה להשתלשל באופן אמיתי. אני לא השתמשתי בזה אף פעם, ולא ידעתי על אדם שעשה זאת. ב־

אמרתי זאת, הַ Set צריך להכיל מחרוזות המייצגות שמות של מחלקות שיש ליישם על הרכיב או האלמנט. הנה קטע קוד typescript שיוצר Set בשם classes:

//הכרזת משתנה חברתי למחלקה
public classes = new Set();
 
//הוספת שמות מחלקות
classes.add('active').add('text-large');

מסקנה

במדריך זה, עברנו על כמה מהדרכים הנפוצות ביותר להקצאת מחלקת CSS באופן דינמי לאלמנט באמצעות ההוראת ngClass. כפי שאתה יכול לראות, זה דבר חזק מאוד.