
CanDeactivate כדי לקבוע אילו ניתובים מותרים.ng generate guard ובוחרים שם, למשל product-list. Angular יוצר קובץ עם הממשק CanDeactivate. מציינים בתוך הממשק את הטיפוס של הקומפוננטה שנבדקת, כאן ProductListComponent.providers, ואז להוסיף אותו לנתיב שבו הוא נבדק.canDeactivate מחזירה ערך בוליאני. אם יש מוצרים בסל, היא מחזירה false והניתוב נחסם. אם אין, היא מחזירה true.nextState מכיל את הכתובת שאליה המשתמש מנסה לעבור. אם הכתובת לא מכילה cart, news או products, והסל לא ריק, הניתוב נחסם.הטקסט המלא של הדקות הראשונות בהרצאה «Guard CanDeactivate» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם וברוכים הבאים להרצאה על ראוטינג מתקדם באנגולר 4 ואנחנו הפעם נדבר על פונקציה, על אינטרפייס Can Deactivate האם מותר לך לצאת מהלינק שבו אתה נמצא?
לדוגמה אתה באמצע עריכה של מסמך ופתאום לחצת על לינק ואני אומר תשמע אם אתה יוצא כל המסמך נאבד לך, כל הטופס נאבד לך זאת אומרת אני שואל את המשתמש האם הוא באמת רוצה לצאת מהלינק כמובן שאני לא יכול למנוע ממנו לעשות רפרש לדעה, או לעבור לכתובת URL אחרת על ידי הקשת כתובת,
אבל אני יכול למנוע ממנו, לדוגמה באמצע הקניות, כשיש לו סל קניות, ללכת לאחד מהלינקים פה למעלה. זאת אומרת כל עוד זה בשליטה של אנגולר, אז אני יכול למנוע ממנו לעבור לדוגמה ללינק About Us.
אני רוצה שאם יש לך סל קניות מלא, אתה תוכל ללכת רק לפרודקטס, למייקארט ולניוז, ולא תוכל לצאת למשהו חיצוני תחשבו שזה טוב כשמישהו ממלא איזשהו מסמך או איזשהו טופס אני מונע ממנו את הלינקים החוצה וזה למעשה כמו can activate יש כזה can deactivate לדוגמה כאן בפרודקט ליסט אני רוצה לעשות
can deactivate האם מותר לך לצאת החוצה can deactivate עובד אותו דבר כמו newsguard רק הוא בודק האם זה true או false האם מותר לך לצאת החוצה או שאסור לך לצאת החוצה אבל זה אותו רעיון אז בואו נלך לאנגולר CLI כמו שעשינו לפני כן פותחים את התיקיית אפ לוחצים שיפט רייט קליק בתיקייה שבה יש מודול פותחים CMD עושים CMD עוד פעם למקרה שיש לנו פאור
של הולכים לאתר של אנגולר CLI ומעתיקים את הפקודה NG Generate Guard ואת השם של הגארד הזה אז אני עושה NG Generate Guard בתיקייה יש לי פה תיקייה שנקראת גארד יש בתוכה כרגע רק ניוז ואני שם לו גארד חדש שאני אקרא לו product list guard אני אקרא לו הנה הוא עשה לי product list.guard הנה הוא קובץ ספציפיקציות לבדיקות אני מוחק והוא
כותב לי פה אזהרה תיזהר זה not provided not provided זה אומר שזה לא רשום לי במודול אני רץ דבר ראשון לרשום את הגארד בתוך המודול אחרי זה כבר נתחיל לחטט בתוכו אני לוקח את הגארד הזה שזה product list guard והולך למודול של ראוטינג ושם אותו כאן ושם אותו גם בפרוביידרס אל תשכחו שהוא כמו סרוויס רגיל חייב להיות בפרוביידרס
אז אני שם אותו גם כאן וגם כאן וגם כאן יופי והנה הוא עשה לי אימפורט אליו והכל בסדר אז יש לי אותו גם פה וגם פה מצוין עכשיו אפשר ללכת לתוך הגארד הזה ולראות מה קורה בפנים אז יש לנו פונקציה כן אקטיבייט האמת שאני לא צריך כן אקטיבייט השבלונה הזאתי סקופילד הזה הטמפלייט הזה שהוא עשה לי קורפילד זה נקרא באנגלית הוא לא מה שאני צריך כי אני לא צריך כן אקטיבייט אני צריך בדיוק
כן די אקטיבייט איך כותבים כן די אקטיבייט כן די אקטיבייט הנה מפה אני אתיק את השם שלו כן די אקטיבייט זה שם של פונקציה זה שם של אינטרפייס ואיך כותבים אותו בדיוק בוא נעתיק מאתר של אנגולר איפה האתר של האנגולר שלנו הנה כן די אקטיבייט והנה יש לנו פה דוגמה לקלאס די אקטיבייט עם קונסטרקטור הוא המצא די אקטיבייט יפה מאוד זה מה שאני צריך הם עשו פה, אני לוקח מפה את הדוגמה של הפונקציה
שלהם, של פונקציה deactivate ומעתיק אותה אליי, יופי. היא גם צריכה להחזיר true או false, true או false. הלאה, מה מיוחד ב-deactivate?
בניגוד ל-activate האינטרפייס חייב לקבל איזושהי קומפוננטה שעליה עושים deactivate, קומפוננטה, את הקלאס שלה, במקרה שלהם הם כותבים את זה Team Component, אצלנו זה Product List Component, זאת אומרת שכאן אנחנו גם מקבלים את הודעת השגיאה הזאת, הוא כותב לי תשמע, עזוב עכשיו אימפורט, כן,
אבל אנחנו מקבלים פה הודעת שגיאה גם שחייבים להיות T, אתם רואים טייפ, זה ג'ינריק שבסוגריים משולשים צריך לקבל איזשהו סוג, טייפ אחד רקוויירד, רקוויירד רוויינט טייפ ארגווימנט, כאילו חייבים איזשהו טייפ להכניס לו בפנים, והטייפ שלי זה למעשה הרכיב שאני הולך לבדוק אותו, שהוא פרודקט ליסט,
אני הולך כאן לפרודקט ליסט, והקומפוננטה, קלאס של הקומפוננטה זה למעשה מה שאני מכניס לו בטייפ ואז משתנה קומפוננט בעצם מקבל אותו ועכשיו אני יכול לבדוק האם מותר לי פה לעשות ניתוב החוצה איך אני אבדוק את זה אני אעשה פה if הקומפוננטה שלי שזה product list למעשה אני מקבל לינק לproduct list בתוך הproduct list יש לי cart
service.myshoppinglist.length זאת אומרת אם יש לי משהו בתוך סל הקניות אני עושה פה return false else return true זאת אומרת שאם יש לי משהו בסל הקניות אני לא נותן לך לצאת ואם אין לי משהו בסל הקניות אני כן נותן לך לצאת ואתם יודעים מה במקום לעשות את ה-return false אני אעביר אותך חזרה לפרודקטס אוקיי עוד פעם can deactivate מקבל בסוגריים משולשים את הטייפ כמו generics ב-cshare של קומפוננטה
שאותה בודקים ואז בתוך פונקציה can deactivate אני מקבל עליה לינק ואז כאן אני יכול לעשות בדיקה יפה מאוד בואו נבדוק שזה באמת עובד אצלי זה לא עובד למה אני רואה שיש לי פה עוד השגיאה למטה שיש לי פה איזה סוגר מיותר בואו נשמור את זה ועכשיו אני מצפה שזה יעבוד יפה מאוד אם אני בלי סל קניות אני יכול לטייל כאן ואם אני קונה משהו
ויש לי פה משהו בתוך סל הקניות שלי שימו לב אני מנסה לעבור ל־about us הוא לא נותן לי אתם רואים הוא לא נותן לי עכשיו אני רוצה