מכיוון שאנגולר בנוי על שימוש בקומפוננטות, אחד האתגרים שיש למפתחים זה שיתוף המידע בין הקומפוננטות השונות. בתיעוד אנגולר אפשר לקרוא על שיתוף מידע בשיטות שונות, אבל רציתי לרכז את הדברים במאמר אחד כדי שיהיה אפשר לראות את השיטות השונות ולהשתמש במה שנכון עבורכם בפרוייקט המסויים שלכם.
נראה 4 דרכים לשיתוף מידע בין קומפוננטות אנגולר:
- הורה לילד עם שימוש ב-Input.
- ילד להורה עם שימוש ב-Output ואירועים.
- ילד להורה עם שימוש ב-ViewChild.
- שתי קומפוננטות לא קשורות אחת לשנייה עם שימוש ב-service.
הורה לילד דרך @Input
נניח שיש לנו קומפוננטת הורה שיש בה רשימה, ואני רוצה שהרשימה הזאת תהיה זמינה לקומפוננטת הילד שהוא קורא לה. איך עושים את זה?
על ידי שימוש ב-Input.
מה זה @Input
@Input הוא decorator שמאפשר לנו לקבל מידע דרך משתנה ממי שקורא לקומפוננטה, כלומר ההורה שלה. את Inpu אנחנו מייבאים דרך @angular/core.
דוגמא לשימוש ב-Input
נניח שיש לנו רשימה של מורים עם המקצועות שהם מלמדים.
הפוסט נכתב בהשראת התוכן באתר dotnettricks.