דילוג לתוכן
  • דף הבית
  • קטגוריות
  • פוסטים אחרונים
  • משתמשים
  • חיפוש
  • חוקי הפורום
כיווץ
תחומים

תחומים - פורום חרדי מקצועי

💡 רוצה לזכור קריאת שמע בזמן? לחץ כאן!
  1. דף הבית
  2. תכנות
  3. א'ב באנגולר

א'ב באנגולר

מתוזמן נעוץ נעול הועבר תכנות
5 פוסטים 3 כותבים 564 צפיות
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • גמליאלג מנותק
    גמליאלג מנותק
    גמליאל
    כתב ב נערך לאחרונה על ידי
    #1

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

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

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

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

    export class ProductAlertsComponent implements OnInit {
      constructor() { }
    
      ngOnInit() {
      }
    
    }
    

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

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

    אשמח לכל הסבר

    yossizY י 2 תגובות תגובה אחרונה
    0
    • yossizY מנותק
      yossizY מנותק
      yossiz
      השיב לגמליאל ב נערך לאחרונה על ידי yossiz
      #2

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

      📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

      תגובה 1 תגובה אחרונה
      2
      • י מנותק
        י מנותק
        יוסף בן שמעון
        השיב לגמליאל ב נערך לאחרונה על ידי יוסף בן שמעון
        #3

        א.
        קומפוננטה = רכיב. קבוצת קוד 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 היא מתודה של המחלקה שמטפלת באירוע שנשלח מהילד

        תגובה 1 תגובה אחרונה
        8
        • גמליאלג מנותק
          גמליאלג מנותק
          גמליאל
          כתב ב נערך לאחרונה על ידי
          #4

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

          י תגובה 1 תגובה אחרונה
          0
          • י מנותק
            י מנותק
            יוסף בן שמעון
            השיב לגמליאל ב נערך לאחרונה על ידי
            #5

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

            button.click()
            

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

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

            event = new EventEmitter()
            

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

            event.subscribe(handler)
            

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

            event.emit()
            

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

            תגובה 1 תגובה אחרונה
            5

            בא תתחבר לדף היומי!
            • התחברות

            • אין לך חשבון עדיין? הרשמה

            • התחברו או הירשמו כדי לחפש.
            • פוסט ראשון
              פוסט אחרון
            0
            • דף הבית
            • קטגוריות
            • פוסטים אחרונים
            • משתמשים
            • חיפוש
            • חוקי הפורום