צורות שונות לקריאה של קומפוננטות אנגולר (angular selector types)

להשמה של רכיב אנגולר ב-HTML יש יותר מדרך אחת, כל הדרכים יובילו לאותה תוצאה אבל אולי יש יתרון בלדעת את השיטות האחרות.

כולם משתמשים בדרך שמיד אראה, בעיקר בגלל הרגל:

@Component({
    selector: 'app-myComp',
    template:  './myComp.component.html',
    styleUrls: ['./myComp.component.css']
})

כשנרצה לקורא לה בדף, נרשום את זה כך:

 <app-myComp></app-myComp>

החיסרון היחיד של השיטה הזו (חיסרון לא ממש משמעותי) היא שלתגית השו אין משמעות ב-HTML והוא לא יודע איך להתייחס אליה ולכן גם אין לה CSS ברירת מחדל.

אנחנו יכולים לעשות את אותו הדבר כך:

@Component({
    selector: '[app-myComp]',
    template:  './myComp.component.html',
    styleUrls: ['./myComp.component.css']
})

עכשיו כשנרצה לקרוא לרכיב, נעשה את זה כך:

<div app-myComp></div>

אפשר לראות שאין יותר תגית בשם לא מובן ל-HTML, ואפשר כמובן לעשות את זה בכל תגית שנרצה (p/li/section/span).

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

אופציה נוספת ואפילו מוזרה יותר:

@Component({
    selector: '.app-myComp',
    template:  './myComp.component.html',
    styleUrls: ['./myComp.component.css']
})

אני מניח שבשלב הזה אתם מנחשים מה זה אומר 😎, וזה אכן כך…..

אנחנו נקרא לרכיב כך:

<div class="app-myComp"></div>

אני יודע מה אתם חושבים, לצערי זה לא אפשרי…… לא ניתן לערבב בין 2 קומפוננטות, זאת אומרת שלא ניתן לקרוא ליותר מקומפוננטה אחת בתגית.

זה לא משנה אם מדובר בתגית או ב-ATTR או ב-CLASS, ברגע שתנסו תעלה הודעת שגיאה שאומרת שלא ניתן….

מה היתרון בשיטות אלו על פני הראשונה 🤔, אין ממש. זה יותר צורת כתיבה ולהמנע מלכלך של הדף בתגיות שלא באמת קיימות.

אה….. ולהראות יותר מקצוענים (רוב מפתחי האנגולר ליודעים או לא זוכרים שהאפשרות הזו קיימת)🤩

נ.ב.

אפשר לבנות ארכיטקטורה שכוללת למשל:

1. דפים ראשיים נכתבים כתגיות
2. רכיבים בתוך הדפים נכתבים כ-ATTR
3. פיסות רכיבים ממש קטנות כ-CLASS

כך להבדיל בין החשיבות והתפקיד שלהן.

פוסטים קשורים:

angular input and output in the same variable אנגולר Rxjs – BehaviorSubject in Service file custom validator for groups – אנגולר ולידטור ייחודי לגרופ ב-reactive form בניה של טופס דינמי על פי מידע מהשרת באנגולר