להשמה של רכיב אנגולר ב-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, ברגע שתנסו תעלה הודעת שגיאה שאומרת שלא ניתן….
מה היתרון בשיטות אלו על פני הראשונה 🤔, אין ממש. זה יותר צורת כתיבה ולהמנע מלכלך של הדף בתגיות שלא באמת קיימות.
אה….. ולהראות יותר מקצוענים (רוב מפתחי האנגולר ליודעים או לא זוכרים שהאפשרות הזו קיימת)🤩
נ.ב.
אפשר לבנות ארכיטקטורה שכוללת למשל:
- דפים ראשיים נכתבים כתגיות
- רכיבים בתוך הדפים נכתבים כ-ATTR
- פיסות רכיבים ממש קטנות כ-CLASS
כך להבדיל בין החשיבות והתפקיד שלהן.
אפשר גם להגדיר את הסלקטור כך:
selector: '#calculator'
ולהגדיר על הדיב כך:
לא כסלקטור של רכיב אלא כמשתנה של תבנית ב-HTML שניתן ל-"תפוס" בצד ה-TS. למשל כשעושים viewChild
דווקא זה כן הולך בסלקטור של רכיב,
אבל משום מה התגובה שלי נחתכה,
ההגדרה על הדיב במקרה הזה תהיה כך:
תודה.
דווקא זה כן הולך בסלקטור של רכיב,
אבל משום מה התגובה שלי נחתכה,
ההגדרה על הדיב במקרה הזה תהיה כך:
תודה.
הרעיון חדש ומרענן
הקוד שאת שולחת לא עובר, אני אשמח אם תוכלי לשלוח אותו לכתובת מייל של האתר
[email protected].
תודה מראש
עידן