Cross-Component Communication - Observable
news/:newsId/:productId, ומפרידים ביניהם בסלאש. ברכיב החדשות קוראים את שני הערכים מהנתיב.find מחפשים את המוצר לפי ה-ID שהתקבל בנתיב. התוצאה נשמרת במשתנה productOnSale.Subject בשם buyRequest. זה ערוץ אסינכרוני: מצד אחד שולחים אליו אירוע באמצעות next, ומצד שני מישהו מאזין לו.buyFromNews, שקוראת ל-buyRequest.next(product). כך המוצר נכנס לתור הבקשות.subscribe ל-buyRequest. בכל בקשה חדשה בודקים אם הכמות של המוצר היא 0, ואם כן מגדירים אותה ל-1 ודוחפים את המוצר לרשימת הקניות.ngOnDestroy מבטלים את המנוי שרק הקומפוננטה צריכה, כדי שהזיכרון לא ייתפס על ידי קומפוננטה שכבר נהרסה.ngOnInit, ולכן כל כניסה רושמת מנוי נוסף. לכן נרשמים רק כשמספר המאזינים (observers.length) הוא 0.פרקי ההרצאה: Cross-Component Communication - Observable
תמלול ההרצאה: Cross-Component Communication - Observable
הטקסט המלא של הדקות הראשונות בהרצאה «Cross-Component Communication - Observable» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם בהרצאה הקודמת עשינו סיכום של כל שיטות התקשורת בין הקומפוננטות והגענו לשיטה האחרונה איך לתקשר בין הקומפוננטות שלא קשורות אחת לשנייה בכלל למה הן לא קשורות אחת לשנייה כי אין להן איזשהו event משותף אירוע משותף אין להם איזושהי תגית משותפת כי הם בכלל עובדים דרך ראוטינג כמו חדשות אז נניח שיש לי פה רשימת חדשות ואני אוסיף פה שיש מבצע דבר ראשון אני בוא נעשה את זה
קצת יותר יפה order list שתהיה רשימה מסודרת אתם כבר לא מפחדים מ html ואנחנו עשינו רשימה מסודרת עכשיו אני רוצה לעשות עוד חדשות חדשות מספר 3 שיש לנו מבצע עם כפתור לקנות בפנים אז אני אומר מבצע על מוצר שנקרא טופו טופו סל ואנחנו רוצים להעביר גם פרמטר על איזה מוצר המבצע בואו נסתכל מה זה טופו אצלנו אני פותח טבלת product
ועושה פה Select where product name שווה TOFU. TOFU זה מוצר מספר 14, אז אני מעביר פרמטר שיש מבצע על מוצר 14. פה אני אעביר עוד פרמטר שזה מוצר 0, זה אומר שזה בעצם אין מוצר.
אז אני ב-news מעביר גם פרמטר 3 שזה מספר החדשות וגם על מה המבצע, על מוצר מספר 14. בואו נלך ל-product ל-routing model ונוסיף פה עוד סלאש נקודתיים פרודקט איי-די על מה המבצע בעצם וזה פה ניוז איי-די נעשה את זה אז למעשה עשינו שהלינק מורכב משני פרמטרים ניוז איי-די
ופרודקט איי-די כאשר את שני הפרמטרים האלו אני מעביר דרך פסיקים אוקיי אז פה אני אומר לו לאן ופה אני מעביר לו דרך פסיקים ובוא נלך לקומפוננט ניוז דיטלס ונגיד לו ככה קודם כל לתוך איי-די זה נקרא ניוז איי-די ולתוך נעשה פרודקט איי-די שיהיה נאמבר והproduct ID זה יהיה כמו זה, נכון? קראנו לו product ID, יופי.
אז הוא לוקח פרמטר שנקרא product ID, מכניס אותו לכאן לproduct ID, ועכשיו אנחנו צריכים לקבל את הפרודקט עצמו, product on sale, מסוג product, ואחרי שיש לי product ID, אני צריך פה בעצם לשלוף את המוצר. איך אני שולף את המוצר? בואו נלך לproduct list, הנה יש לי פה את כל המנגנון של שליפת מוצר, שאני הולך לproduct
service, לוקח את ה-observable שלו, עושה לו subscribe, מקבל רשימת המוצרים בוא נלך לזה שלנו וכאן אני מקבל את רשימת המוצרים ואני צריך פה למצוא לא product product on sales שווה לרשימת המוצרים נקודה אין לי פה product service בוא נכניס פה product service נעשה את זה public כך תחתון product service מסוג
product service זוכרים שהייתה לי התראה על הדבר הזה ואני מייבא אותו אז יש לי פה product service ואני עושה לו סאבסקרייב, מקבל אותו, ואחרי שקיבלתי אותו אני צריך לעשות פה נקודה פיינד למצוא, בתוך המערך הזה אני רוצה למצוא מוצר שיש לו איי-די נכון.
אז הפיינד הזה יעביר לי מוצר אחרי מוצר, ואני אבדוק עבור כל אחד האם פרודקט איי-די שלו שווה שווה למה שאנחנו מחפשים, לפרודקט איי-די הזה. אתם יודעים מה? אפילו אפשר לקצר את הסיפור הזה, אבל לא חשוב.
את הפרודקט איי-די הזה אני יכול להכריז אותו כמשתנה פנימי. אני יכול פה לעשות let product ID number וזהו אני לא צריך אותו בגלובלי אז אני אומר product ID משתנה product ID מקבל את ה-ID מכאן אחרי זה אנחנו הולכים לסרוויס לוקחים את כל רשימת המוצרים ועוברים על כל הרשימה הזאת ומוצר מוצר בודקים מי מהם שווה ל-true או false מי product ID
שווה למה שאנחנו מחפשים ומי שעונה ל-true נכנס ל-product on sales זה נקרא predicate predicate זה true או false ו-Find הזה, זה מובנה במערך RA. מכניסים את זה לתוך Product on Sales, ויש לנו פה מוצר שיש עליו מבצע.
אני מקווה שהבנתם, כן? עוד פעם, קיבלנו פה את ה-ID מתוך הפרמטר שהועבר לנו בסלאשים, בלמעלה. מתוך ה-ID הזה הלכנו לרשימת כל המוצרים, קיבלנו אותה מהשרת, לקחנו את הרשימה ועברנו על כל הרשימה ומצאנו את המוצר שה-ID שלו הוא נכון והכנסנו אותו לכאן.
מה שקורה בסאבסקרייב זה מה יקרה כשתבוא תשובה מהשרת פונקציית סאבסקרייב זה כל הטיפול בחלק קבלת מוצר מהשרת רשימת מוצרים מהשרת יופי יש לנו עכשיו product on sales אז אנחנו יכולים לעשות פה איזושהי פונקציית buy buy from use אוקיי נעשה איזשהו buy from news ופה אנחנו צריכים לטפל באירוע של קנייה בואו נלך עכשיו ב html ונעשה כפתור שמפעיל את הפונקציה הזאת
ביי פרום ניוז אז אני עושה פה בוא נעשה פה איזשהו נעטוף את זה בדיו אבל כאן נעשה בטון שמה הבטון הזה כשיש לו און קליק כשיש לו אירוע של קליק אנחנו מפעילים את הפונקציה ביי פרום ניוז וזה ביי ביי נאו ואנחנו יכולים גם עכשיו להכניס לנו את המניח פונקציית ביי נאו בסדר אז אנחנו מפעילים ביי פרום ניוז וכאן השאלה זה מה אנחנו מכניסים פנימה כי אנחנו רוצים
שימו לב מה אנחנו רוצים אנחנו רוצים שהאלגוריתם של קנייה הוא לא נמצא אצלנו הוא לא נמצא ברכיב הראשי שלנו האלגוריתם של קנייה נמצא בכלל בפרודקט ליסט אלגוריתם של הקנייה נמצא כאן בתוך ביי של פרודקט ליסט אתם רואים עכשיו השאלה זה איך קומפוננטה הזאת תדבר עם הקומפוננטה ההיא הנה יש לנו פה שתי קומפוננטות והשאלה זה איך קומפוננטה
ביי תדבר עם קומפוננטת פרודקט ליסט שאין לביניהם שום קשר אין לביניהם סלקטור אין ביניהם שום קשר וכדי שזה יקרה אנחנו נלך לקארט סרוויס כמובן שיכולנו לעשות בקארט סרוויס כמו שעשינו פה גטר וקלקולי צם ולמחוק את המוצרים שהכמות שלהם אפס יכלנו לעשות פה גם את הפונקציה
של ביי להכניס אותה לכאן זאת אומרת יכלנו לקחת את כל הביי הזה לעשות לו קופי ופייסט לשם קופי וקארט סרוויס פייסט לכאן ואז כל מי שרוצה לעשות ביי מפעיל את הפונקציה בקלאס הזה בדיוק כמו שאנחנו מפעילים שופינג ליסט נקודה פוש אז יכולנו לקחת את כל האלגוריתם של ביי ולהכניס אותו בסרוויץ וזה באמת מאוד הגיוני רק יש לנו בעיה הקומפוננטה של פרודקט ליסט כבר כולם
עובדים איתה כולם מכירים אותה אסור לגעת בה אסור לשנות בה שום דבר או לפחות את הלוגיקה של הקומפוננטה רוצים להשאיר פה בפנים ולא להוציא החוצה קיבלנו הוראה שפרודקט ליסט הביי חייב להיות בפנים כי יש לו עוד כל מיני דברים שיש שם כל מיני פונקציות נוספות כל מיני ולידטורים אנחנו רוצים להשאיר את הפונקציית ביי
כאן בתוך product list ולא להעביר אותה לתוך סרוויס אז אם אנחנו לא רוצים להעביר אותה לסרוויס אנחנו צריכים שקומפוננט אחד תודיע לקומפוננט השנייה שקרה אירוע וזה בדיוק מה שאנחנו עושים כאן בתוך סרוויס אנחנו עושים פה סאבג'קט חדש אובזורבאבל חדש שהוא למעשה דרכו תועבר ההודעה בוא נעשה את זה נכניס פה אובזורבאבל נקרא לו buy request בקשת
קנייה buy request עכשיו מה זה הסאבג'קט הזה הסאבג'קט הזה זה כמו Observable זה למעשה צינור אסינכרוני שאפשר לטפטף בו אירועים מצד אחד ולתפוס בצד שני ולך תדע מתי יקרה האירוע מתי ילחצו על כפתור קנייה ואני אומר לו שהאירועים שמטפטפים עובר בהם אובייקט מסוג פרודקט זה אומר שלתוך הצינור הזה שמטפטפים האירועים
האירוע זה למעשה האובייקט חדש מסוג פרודקט אני רואה שאין לי פה אימפורט בואו נעשה אימפורט סאבג'קט עשינו לו אימפורט אז אנחנו נטפטף לכאן את האירועים והפונקציית ביי תטפל בכל אירוע חדש שייכנס.
אוקיי, אז עשינו את האובייקט, עכשיו אנחנו הולכים לקליינט שלנו ורוצים לעשות לו טפטוף של אירוע. איך אנחנו עושים טפטוף של אירוע?
על ידי פונקציית נקסט. הנה, איך אנחנו מוסיפים לו אירוע. אז בוא נלך ונטפטף לו אירוע. אז עשינו פה את הצינור, הקמנו את הצינור, עכשיו אנחנו הולכים ל-news details, ובזמן הקנייה מכניסים לצינור הזה, זה cart service, זה בתוך ה-cart נמצא, בואו נעשה זריז, גם קארט סרוויס נעשה פה.
שנייה אחת, נעשה פה פאבליק, כף תחתון, קארט סרוויס, מסוג קארט סרוויס, וקארט סרוויס הזה צריך לייבא אותו למעלה. הנה פה הוא מייבא אותו, מקווה שלא תהיה לי בעיה עם הלינקים האלו, למרות שאני חושב שתהיה לי בעיה, אבל נראה.
קארט סרוויס, אני אומר לו קארט סרוויס, נקודה ביי רקוווסט. שימו לב, יש לו בביי רקוווסט הזה, יש לו נקסט. הזה מקבל פרודקט ומכניס אירוע לתוך הצינור ואנחנו מכניסים product on sale פה צריך להכניס אז למעשה אנחנו לוקחים את הצינור של buy request ומכניסים לתוכו מוצר חדש שביקשו לקנות
אז כל פעם שמישהו מבקש לקנות מוצר אנחנו מכניסים אותו לתוך הצינור הזה והצינור הזה נמצא בתוך סרוויס משותף לכל הקומפוננטות והנה פה ההכרזה על observable שזה למעשה subject זה השדרוג של observable אני לא רוצה עכשיו להיכנס מה ההבדלים ביניהם כי זה פשוט לא חשוב להרצאה שלנו.
מנקודת מבט שלכם זה אובזורבו בו משוכלל יותר, שנכנסים בו אירועים, ופעם ראשונה אנחנו דוחפים אירוע לבד, ויש מי שיטפל באירועים, שזאת פונקציית ביי ושאנחנו הולכים לעשות אותה.
אז טפטפתי לפה אירוע. אותו דבר עכשיו בפרודקט ליסט, כשמישהו מבקש לקנות משהו, אני צריך לטפטף את המוצר לתוך הצינור, הנה אני מטפטף פה את המוצר לתוך הצינור שהבן אדם ביקש לקנות, ולהעביר לשם את כל הטיפול במוצר הזה.
אז בואו נעשה את זה בדיוק כמו שעשינו NG on-in-it, שעשינו סאבסקרייב מנויים לרשימת המוצרים כשתגיע הפנייה מרשימת המוצרים, נכון? כשבפרודקט ליסט תגיע הפנייה.
אז אותו דבר, כאן אנחנו עושים this.כתחתון.cardservice.byrequest. subscribe, שימו לב, אנחנו מתלבשים על ה-subscribe, נהיים מנויים. ברגע שנכנסת בקשה שתבוא אליי, נכנסת בקשה עם איזשהו פרודקט שימו לב אני יודע שזה הולך להיות פרודקט אני יכול להכריז עליו כפרודקט אבל גם ככה אני יודע שהוא הולך
להיות פרודקט כי הוא כבר רואה שזה פרודקט איך אני יודע אם הוא רואה או לא כשאני אשים נקודה הוא רואה את כל המאפיינים של הפרודקט אז זה אומר שהוא יודע אז אני אומר תקשיב כשיגיע מוצא חדש לתוך הצינור את כל הקוד הזה לעשות זה אומר שעכשיו יש לי כל מיני קומפוננטות שונות שמטפטפות אירועים לתוך הצינור וברגע שמשהו
נכנס לצינור הוא יוצא בסאבסקרייב ומופעל הדבר הזה אז אני לוקח את המוצר שנכנס בודק אם הקוונטיטי שלו 0 אם הקוונטיטי 0 מכניס לו קוונטיטי 1 ודוחף אותו לשופינג ליסט אז כל הדבר הזה מתבצע לי כשיש ביי רקווייסט חדש בואו נראה שהכל עובד לנו כמו שצריך ואל תתפלאו אם דברים לא עובדים הדבר הזה בכלל קשור
לפרודקט דיטלס ובואו נוסיף כאן הערה for product details reset product details view בסדר פה אני הוספתי שזה בכלל קשור לפרודקט דיטלס כשפרודקט דיטלס לוחץ ביי דרך אגב גם בפרודקט דיטלס אני יכול להכניס את הביי הזה רק שתדעו לכם טוב אנחנו נסתפק בדוגמה הזאת שבו אנחנו למדנו איך אנחנו דוחפים אירועים לתוך צינור Observable ואיך אנחנו עושים לזה סאבסקרייב ומקבלים אותם
וכך קומפוננטות שונות יודעות לתקשר בינן לבין עצמן שאין ביניהם שום קשר בראוטינג הנה שימו לב אין פה כלום הנה בואו נבדוק אין לנו פה אף מוצר אנחנו הולכים לניוז לוחצים טופו פור סייל ביי נאו והמוצר מופיע לנו כאן והכל מצוין עכשיו דבר נוסף שהם מראים לנו פה שיש משהו שנקרא
סאבסקריפשן אנסאבסקרייב אנסאבסקרייב זה למעשה להוריד את המנוי לאירוע הזה אינג'יון דיסטרוי זה אומר כשהקומפוננטה יורדת מהאוויר לעשות אנסאבסקרייב איך עושים את זה צריך לקחת משתנה סאבסקריפשן שלמעשה את הסאבסקרייב שלי הם מכניסים למשתנה
שנקרא סאבסקריפשן בואו נעשה את זה ואם אני אכניס כאן בפרודקט ליסט משתנה חדש מסוג סאבסקריפשן, ואז כשאני עושה סאבסקריפשן אני אשתמש בו, זה אומר כשאני עושה פה סאבסקרייב אני הולך להשתמש במשתנה הזה, אחרי זה כל הסאבסקריפשן שלי, כל זה שאני מנוי לאירוע מסוים נכנס למשתנה הזה,
ואז בסוף כשהקומפוננטה מושמדת גם הסאבסקריפשן מושמד.