שלום לכולם,
השיעור עשינו תרגול של העברת מידע בין קומפוננטות.
בנינו חלון צ'אט בסגנון וואטסאפ, שבו יש קומפוננטה אחת שבעצם מדמה את איזור ההקלדה וקומפוננטה אחת לצ'אט עצמו שמציג את השיחה.
לאחר מכן למדנו על ngOnInit והתחלנו ללמוד על Directive.
למדנו גם מעט על NgOnChanges
שיעורי בית לתרגול:
בנו אפליקציה של צפייה בסרטוני יוטיוב !
מסך הראשי:
כאשר לוחצים על הוספת סרט נפתח לנו טופס בסגנון הבא:
מה בעצם קורה פה??
יש לנו סה"כ 3 קומפוננטות (ללא ה main)
- MoviesComp – מציגה את הרשימה של הסרטים, שהיא הקומפוננטה הראשית. – מארחת בתוכה את 2 הקומפוננטות האחרות.
- PlayerComp – של נגן הוידיאו, שיודעת לקבל url בצורה דינאמית מהקומפוננטת אב. (העברה מאב לבן)
- addVideoComp – קומפוננטה שמכילה טופס פשוט להוספת סרטון- מייצרת אובייקט של סרט חדש ויודעת להפיץ את האובייקט באמצעות EventEmitter (העברה מילד לאב) ולמעשה מעדכנת את הקומפוננטת MoviesComp בכל פעם שהתווסף סרט חדש.
כל סרט מתואר ע"י אובייקט, מכיל שם, תמונה, וקישור יוטיוב.
הסבר יותר מעמיק..
יש לנו קומפוננטה אחת שמציגה את הרשימה של הסרטים!
בקומפוננטה הזו יש מערך של אובייקטים של סרטים.
הרשימה מוצגת על ידי שימוש ב ngFor.
בנוסף, הקומפוננטה הזו מארחת אצלה את הקומפוננטה של הוספת סרט חדש – ברגע שממלאים את הפרטים של כל סרט – נוצר אובייקט חדש בקומפוננטה והוא מועבר לקומפוננטת אב ומתווסף למערך ומעבירים את האובייקט למערך בקומפוננטה של האבא (העברת נתונים מקומפוננטת child ל parent)
בקומפוננטת אב אנחנו מארחים גם קומפונטטה בשם PlayerComp – הקומפוננטה של נגן הוידיאו.
ברגע שלוחצים על אחד מהסרטונים ברשימה – הסרטון מתחלף לאותו סרט שלחצנו עליו.
למעשה, לקומפוננטה הזו אנחנו מעבירים כל פעם (העברה מאב לבן) את ה url של הוידיאו. והקומפוננטה מציגה את הוידיאו עם iframe ולינק דינאמי של הקומפוננטה.
למעשה, אתם בונים אפליקציה ממש מגניבה וגם מתרגלים העברת נתונים מקומפוננטת אב לבן וגם מבן לאב!
להגשה עד 2/3/2020 ׂ- ׂכולל, זאת אומרת יש לכם גם את כל החופש של יום הבחירות לעבוד על זה.
בהצלחה!