Event Emmiter
raiseEventBuy בתוך Product Details.Output ואת EventEmitter מתוך @angular/core, ומגדירים משתנה onEventBuy מסוג EventEmitter. מגדירים לו את הטיפוס Product, כדי שהאירוע יעביר מוצר.emit עם המוצר שהלקוח רוצה לקנות, ואחר כך מסתירים את החלון.(onEventBuy)="buy($event)". $event הוא הערך שנשלח, והפונקציה buy מטפלת בו כמו בכל פונקציה רגילה.productToShow, ושולח החוצה את onEventBuy. אם רוצים שמות שונים בפנים ובחוץ, אפשר לתת כינוי (alias) לכל מאפיין.ngOnChanges לא מגיב. הפתרון: אחרי הקנייה מאפסים את המוצר המוצג, ורק כשהמוצר לא ריק מציגים את החלון.פרקי ההרצאה: Event Emmiter
תמלול ההרצאה: Event Emmiter
הטקסט המלא של הדקות הראשונות בהרצאה «Event Emmiter» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם בהרצאה הקודמת עשינו NG on changes למעשה רכיב שמגיב על שינויים ומציג את המוצר בגדול על המסך בחלון מודל כזה חלון קופץ שחור שמשתנה product to show הוא מזהה את זה ומקפיץ את זה עכשיו אנחנו רוצים לעשות כפתור של רכישה שמתוך המסך הגדול מתוך הקומפוננטה נוכל לקנות את המוצר וכשאנחנו בתוך החלון הזה במקום save changes אנחנו רוצים
לרשום פה buy לקנות ולעשות אירוע של רכישה ובעיה שבתוך product details אין לנו את כל האלגוריתם של קנייה אז אנחנו רוצים שמתוך product details יהיה אירוע שאומר אני רוצה לקנות את המוצר הזה והאירוע הזה יטופל על ידי קומפוננטה ראשית שמעליה כי יש לה את כל האלגוריתם של מה זה לקנות אז איך להעביר מידע מקומפוננטה המשנית לקומפוננטה הראשית איך להעביר אירוע שהיה פה ניסיון לקנות מוצר לדוגמה, זה נקרא
לעורר אירוע, זה דומה ל-Button Click, לאירוע של קליק בכפתור, רק את הכפתור עכשיו אנחנו נעשה לבד, אני מזכיר לכם שאנחנו בתוך קומפוננט ה-Product Details ויש לנו פה אינפוט שנכנס מבחוץ של הצגת מוצר, איזה מוצר להציג, עכשיו אנחנו עושים, אחרי שעובד ה-Engine on Changes שמגיב לשינוי
בפרמטר האינפוט, אנחנו רוצים להוסיף פונקציה של ביי של לקנות וברגע שאנחנו לוחצים על ביי מטפטף אירוע לקומפוננטת האם שלי לקומפוננטה הראשית שלי וזאת המטרה של ההרצאה הזאת ללמוד איך עושים אירועים מקומפוננטה משנית לקומפוננטה ראשית שימו לב איפה אנחנו נטפל באירוע הזה בתוך תגית html בקומפוננטה הראשית ונתחיל מזה שפשוט נעשה כפתור שנקרא
לו ביי בפרודקט דיטלס שימו לב וכשאנחנו נלחץ על הכפתור של ביי נייצר איזושהי פונקציה, נעשה פונקציה משלנו שנקרא לפונקציה הזאת race event on-by. כאילו, תעלה אירוע, רייז זה לעלות, להצמיח אירוע on-by, אני מוסיף מילת on כמו שזה נהוג בעולם של אנגולה, וככה אני קורא לפונקציה שלי, רייז און ביי איבנט. זה
למעשה פונקציה רגילה, שזה כפתור רגיל של ביי שלחצו אותו, ובואו נכתוב את הפונקציה הזאת. ועכשיו החלק הכי מעניין, איך עושים אירוע. כדי לעשות אירוע צריך לעשות רכיב, כמו שעשינו שטרודל אינפוט לעשות שטרודל אאוטפוט וכשאנחנו עושים שטרודל אאוטפוט ולמעשה אנחנו פולטים החוצה אירוע כמו שיש לנו משהו
שאנחנו קולטים מבחוץ ככה יש לנו אירוע שאנחנו פולטים החוצה ונקרא לאירוע on by event דהוג לאירועים לקרוא במילה on כאילו כשקורה משהו ויש לזה אובייקט מיוחד שנקרא event meter event meter זה אובייקט מיוחד שנועד בעולם של אנגולה לייצר אירועים כאלו ואנחנו צריכים לייבא אותו מאנגולר קור. שימו לב, אתם עושים קונטרול רווח
ואתם רואים שהוא קיים באנגולר קור. ויש לו שני סוגים, יש לו את הסוג הג'נרי שזה אובג'קט הרגיל, ויש לו מסוג Strong Type שמוגדר היטב. אני גם שכחתי לייבא את ה-Output מתוך אנגולר קור.
אז אנחנו רואים עכשיו Event Meter פשוט שמייצר אובג'קט רגיל. הוא לא Strong Type, אין לו איזשהו טייפ מוגדר. אני אומר לו אני רוצה שהאירועים שיטפטפו למעלה יכללו אובייקט מסוג פרודקט שימו לב כשקורה אירוע אני יכול להעביר לרכיב הראשי שלי פרמטר כלשהו אובייקט כלשהו ואני אומר שהאובייקט
הזה יהיה מסוג פרודקט אם אני לא כותב בסוגריים משולשות פרודקט זה יהיה אובייקט רגיל שאני יכול להעביר אז אני אומר לו אני רוצה להעביר כחלק מהאירוע אובייקט פרודקט למעשה את המוצר שנקנה ואנחנו לוקחים את משתנה onEventBy ומפעילים אצלו פונקציה שנקראת emit, זאת פונקציה שבעצם מפעילה את האירוע אני מפעיל את האירוע ואני יכול אני לא חייב
להעביר אובייקט נוסף ושימו לב באינטליסנס הוא אומר שפה צריך להיות אובייקט מסוג product ואיזה אובייקט אני מעביר בעצם את המוצר שהלקוח קנה יפה מאוד אז כשמישהו ילחץ על הכפתור by יופעל אירוע והאירוע הזה יעביר פרמטר אחרי שהאירוע יופעל אני צריך גם להחביא את החלון בואו נראה איך אני מחביא את החלון הקופץ הזה השחור הזה אני צריך להוריד אותו כי בן
אדם לחץ לקנות זהו הוא חוזר לדף הראשי שבו נמצא הסל קניות שלו אני הולך לאתר של בוטסטראפ לג'אווה סקריפט ורואה שיש לנו פה פרמטר שואו ופרמטר הייד זה למעשה הפרמטרים שאני מכניס לו בתוך הפונקציה של מודל טורגל זה להחליף בין שואו להייד אני לא צריך להחליף אני אומר לו במפורש כאן אתה מדליק וכאן אתה מכבה זה ידליק לאותו ובאירוע של קנייה הוא יפעיל את האירוע ואחרי הפעלת אירוע הוא יסגור את
החלון, מצוין. עכשיו אנחנו צריכים ללכת לרכיב הראשי ולטפל באירוע הזה שקרה ברכיב הבן שלו. בסלקטור העברנו לו את הפרמטר, ככה כמו שהעברנו לו פרמטר ככה אנחנו גם מטפלים באירוע, כמו שהיה לנו אירוע בסוגריים קליק עכשיו עשינו
אירוע משלנו שקראנו לו on-by event ואנחנו צריכים להגיד איזה פונקציה ברכיב הראשי תופעל. מפעילים פונקציית ביי רגילה עם בסוגריים את הפרודקט שהבן אדם ביקש הפרודקט ההוא שהאירוע העלה לנו אנגולר מעביר לנו אותו בתור דולר איבנט דולר איבנט זה למעשה משתנה שאנגולר דוחף לתוכו את האובייקט ההוא שהכנסנו אותו כפרמטר
אז בתוך רכיב שלנו יש לנו רכיב שנכנס כאינפוט נכנס פנימה ויש לנו אירוע שנפלט החוצה זאת אומרת למדנו לתוך קומפוננטה גם להכניס ערכים באינפוט וגם למדנו עכשיו איך לפלוט ממנו אירועים החוצה כשקורה משהו למעשה כאילו עשינו כפתור משלנו או רכיב משלנו שגם יודע לקבל משהו בכניסה וגם להוציא משהו ביציאה אז יש לנו בכניסה
product to show ויש לנו ביציאה on-by event שימו לב אם אני לא רוצה שמות שיהיו זהים בפנים ובחוץ אני יכול בסוגריים לכתוב אליאס שונים שמות שונים ראינו את זה בהרצאה הראשונה של קארט ועובד לנו שימו לב אנחנו לוחצים על מוצר הוא מתווסף לסל אנחנו גם לוחצים על תמונה נניח של גבינת קממבר אנחנו רואים את המידע,
לוחצים ביי בתוך פרודקט דיטלס וזה מתווסף לנו לסל הקניות ואין לנו שגיאות בקונסול והכל עובד לנו מצוין זה היופי ולמדנו איך עושים אוטפוט רק יש לי בעיה קטנה שהכל עובד לנו מצוין חוץ מאיזשהו תסריט אחד תסריט שבו אני עושה קליק פעמיים על אותו מוצר
אז ראינו איך לייצר אובייקט של אירוע ראינו איך לעורר אירוע וראינו איך לטפל בו ברכיב הראשי זה שלושת הדברים שרציתי להראות לכם ואנחנו עכשיו נתפנן לטפל בבעיה קטנה ששמתי לב שיש לי שאם אני לוחץ פעמיים על אותו מוצר האינפוט שלו לא משתנה ו-engine changes לא מגיב לי כי האינפוט לא השתנה אם אני לוחץ על משהו אחר זה עובד
אבל אם אני לוחץ עוד פעם על אותו מוצר שום דבר לא עובד לי וזה בגלל ש-products details נשאר אותו דבר כשאני לוחץ פעם שנייה זה שהכבדתי את החלון זה לא משנה את הפרודקט דיטלס הזה כי פרודקט דיטלס הזה משתנה רק כשלוחצים על תמונה אחרת אז כדי לפתור את הבעיה הזאת אני רוצה אחרי הקנייה לאפס את המוצר שמציגים
וכשאני אאפס אותו אחרי הפונקציה דביי בפעם הבאה כשילחצו על אותו מוצר זה יהיה כאילו קישור חדש כי אחרי כל פעם שקונים משהו מתאפסת הפונקציה אבל היא התאפסה אבל engine on changes הגיבה על האיפוס והציג לי חלון שחור אז אני צריך להסביר