Property Binding

תמלול ההרצאה: Property Binding

הטקסט המלא של הדקות הראשונות בהרצאה «Property Binding» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:06

   שלום לכולם ברוכים הארבעים להרצאה על העברת פרמטרים באנגולר בואו נחזור חזרה לפרויקט של אנגולר כי יש לנו גם פרויקט של web api של server side צד שרת וגם של אנגולר עכשיו אנחנו רוצים עכשיו אנחנו רוצים לקבוע שהפרויקט של אנגולר יעלה והפרויקט של web api לא יעבוד והמטרה שלנו פשוטה לקחת את הקומפוננט ולפצל אותה לשנתי חלקים.

2. 00:45

   למעשה אני רוצה שסל הקניות יהיה בקומפוננט הנפרדת. למה? כדי שהוא יהיה זמין גם כאופציה בתפריט באופן נפרד. לא רק כשיש רשימת מוצרים אפשר לראות אותו, גם כשיהיה לך אופציה בתפריט לראות את סל הקניות שלי.

3. 01:03

   בשביל להטעין רק את ה-Cart, את הסל שלי, את העגלה שלי, אני צריך בעצם להפריד אותה לקומפוננט הנפרדת. ואני רוצה ללמוד איך להעביר אליה פרמטרים.

4. 01:15

   איזה פרמטר אני צריך להעביר אליה? את מה שקנו עד עכשיו. אז בואו נפריד את זה לקומפוננטה נפרדת, ונלמד איך להעביר אליה מידע מפרודקליסט.

5. 01:28

   אז בתוך קומפוננט הפרודקליסט תהיה קומפוננטה נפרדת. בואו נתחיל לעשות את זה. Open Folder. אני פותח תיקייה שבה נמצא App Module, לוחץ Shift-Right-Click, פותח CMD כאן וכותב CMD כדי שיהיה בטוח DOS ולא PowerShell, מוודא שבאמת אפ מודול נמצא כאן והולך לאתר של אנגולר CLI להביא את הפקודה.

6. 02:04

   אני אומר לו שיעשה את זה בתוך תיקייה נוכחית /componento /cart, עגלת קניות. יפה מאוד, הוא עשה לי תיקיית cart ועשה לי את הקומפוננטה.

7. 02:20

   אני מוחק את הקובץ של הבדיקות, אני לא צריך אותו, ולוקח את כל הקוד שלי וגוזר אותו ומעביר אותו לכאן, הקומפוננטה החדשה שלי זה קארט לא צ'ארט קארט זה צ'ארט זה שרטוט כמו כן אני צריך בפרודקט ליסט טי אס איפה שכל הרשימה שלי איכשהו את המערך קארט את הרי קארט להעביר לקומפוננטה היא בוא נראה איך אנחנו עושים את זה אנחנו ניקח את הסלקטור מהקומפוננטה החדשה

8. 03:01

   את הסלקטור ונגיד שאתעין אותה כאן אז מה שעשינו למעשה לקחנו הוצאנו חלק מהקוד לקומפוננטה נפרדת ואמרנו להתאים את הקומפוננטה כאן מבחינה גרפית עכשיו השאלה איך לקומפוננטה שלי יגיע משתנה קארט איך הוא יגיע לשם כדי להציג את הרשימה או אז בשביל זה אנחנו נעשה דבר כזה אנחנו נעביר

9. 03:32

   אותו על ידי פרופרטי מאפיין בגלל שזה רכיב שלנו אנחנו יכולים להמציא לו כל שם נניח נמציא לו שם לא לא יודע, אין לי איזה שהוא רעיון איך לקרוא לו, אני אקרא לו פשוט קארט.

10. 03:49

    עכשיו שימו לב, השם הזה זה המאפיין שלי כמו href, כמו כל דבר אחר, והוא יקבל את הערך של מערך קארט. עכשיו כדי לא לבלבל אתכם בואו ניתן איזה שמות שונים למרות שאפשר לשים אותו שם, נניח client all products, products to buy, בואו נעשה את זה products to buy.

11. 04:24

    אוקיי, אז לקחתי והמצאתי מאפיין product to buy והוא מקבל את המשתנה cart. עכשיו נשאר לי ללכת לקומפוננט החדשה שיצרתי וליצור את המשתנה הזה product to buy שיהיה מסוג array.

12. 04:48

    אבל איך אני אומר שזה לא סתם משתנה שהוא מגיע מבחוץ? בשביל זה יש לי פונקציית עזר של input וכאן אני צריך לעשות לה שטרודל אינפוט לא מבין מה זה סוגריים מרובעים אז נעשה לו array פשוט נרשום לו כך הוא יבין או שלא ניתן לו טייפ בכלל יופי לא נתנו לו סוג זה למעשה כמו לרשום any זה אומר שזה

13. 05:15

    יכול להיות כל סוג אז אני יכול לכתוב any ואני יכול לכתוב סוג מסוים זה נקרא פחות טוב אבל ככה זה יותר נוח עכשיו product to buy זה מה שיהיה המערך שלי הבנו איך עושים את זה?

14. 05:33

    חשוב מאוד, בקומפוננטה הראשית אנחנו מוסיפים מאפיין כלשהו ונותנים לו כל שם שאנחנו רוצים ומשייכים לו איזשהו ערך מתוך הקומפוננטה הראשית. הקומפוננטה המשנית צריך ליצור את המאפיין הזה והוא נקרא שטרודל אינפוט וזה המאפיין.

15. 05:58

    בואו נראה שכל זה עובד ואני רואה שזה לא עובד, יש לנו פה שגיאה על משהו שקשור ללנקס בתוך