א'ב באנגולר

[גמליאל]

בס"ד התחלתי ללמוד קצת אנגולר
התחלתי עם המדריך באתר הבית שלהם
https://angular.io/start#create-a-new-project

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

סגנון ההדרכה שם הוא לשכתב שורות קוד בלי להסביר, ולכן כמה דברים יצאתי לא ברור בכלל.

א. בכל קומפוננט (כתבתי את זה נכון?...) בקובץ של הts אני רואה קוד בסגנון הזה:

export class ProductAlertsComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

}

אז אני מבין שבקוד הזה אנו מייצאים את הקומפננט אבל מה הכוונה ב"implements OnInit"?

ב. מה בדיוק תפקידן של הפונקציות @input ו @output?

אשמח לכל הסבר

[yossiz]

@גמליאל אני לא עונה על שאלותיך. אני רק מציין ששאלותיך לא קשורים רק לאנגולר אלא גם ל-typescript.
לגבי implements אפשר לקרוא יותר כאן
לגבי השטרודעלעך, הם נקראים decorators ואפשר לקרוא עליהם כאן

[יוסף בן שמעון]

א.
קומפוננטה = רכיב. קבוצת קוד HTML שמקושרת לקוד JS ששולט עליה.
אפשר לעשות בקומפוננטה שימוש חוזר, כמו שבקוד JS אתה כותב כמה שורות בתוך פונקציה אחת, וקורא לפונקציה כמה פעמים, כך אתה עושה קומפוננטה אחת וקורא לה מאיפה שאתה רוצה כמה פעמים שאתה רוצה.
לכל קומפוננטה יש "מחזור חיים" הוי אומר כשאתה קורא לה אתה טוען אותה והיא מתחילה לחיות, כשהיא נעלמת אז היא מתה, יש לה כמה שלבים מהטעינה ועד המיתה.
כדי שתוכל לשלוט על האירועים במחזור החיים, אנגולר מספקת לך מתודות שנקראות בכל אירוע, כלומר כשהיא מתחילה את החיים, אנגולר קוראת למתודה ngOnInit, כשהיא מתה אנגולר קוראת למתודה ngOnDestroy, כשהתצוגה שלה משתנה נקראת המתודה ngAfterViewChecked, וכן על זה הדרך.
זה ההסבר למתודה ngOnInit, שם אתה קובע מה יקרה כשהמתודה תתחיל את מחזור החיים.
השורה implements OnInit זה שורה הצהרתית, אליבא דאמת היא מיותרת והקוד יפעל גם בלעדיה, היא נועדה להסביר לטייפסקריפט שהמחלקה הזו מממשת אינטרפייס שמכיל את המתודה ngOnInit.

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

<app-chlid-component></app-chlid-component>

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

<app-chlid-component [product]="someProduct" ></app-chlid-component>

כך אתה מזריק מידע לקומפוננטת ילד.
הילד יצפה לקבל את המידע הזה עם אינפוט:

@Input() product

אותו רעיון לגבי האאוטפוט, הילד רוצה להעביר מידע להורה שלו, הדרך היא כך:

@Ouptput() someData = new EventEmitter<any>()

...

this.someData.emit('data')

ובקריאה לילד מוסיפים

<app-chlid-component [product]="someProduct" (someData)="dataHandler"></app-chlid-component>

כאשר ה dataHandler היא מתודה של המחלקה שמטפלת באירוע שנשלח מהילד

[גמליאל]

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

[יוסף בן שמעון]

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

button.click()

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

האירועים של הדפדפן (ושל נוד) עובדים בצורה הפרימיטיבית, כל אירוע יש לו שם שמזוהה בסטרינג 'click' 'hover' וכו', וכדי ליצור אירוע עצמאי מזהים אותו כמחרוזת 'myCustomEvent', ונרשמים לאירוע ופולטים אותו עם המזהה סטרינג שלו.
אנגולר פיתחו מחלקת אירועים יותר מסודרת, כדי ליצור אירוע יוצרים מופע של המחלקה EventEmitter שמתפקד כאובייקט הגיוני

event = new EventEmitter()

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

event.subscribe(handler)

ופולטים אותו כך

event.emit()

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