כיצד להשתמש ב-Output Decorator בזווית

ב-Angular, דף אינטרנט יכול להכיל רכיבים רבים ושונים לשימוש חוזר. כל רכיב מכיל בדרך כלל לוגיקת TypeScript, תבנית HTML וסגנון CSS משלו.

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

אתה יכול גם להשתמש ב-Output decorator כדי להאזין לאירועים המתרחשים ברכיב הילד.

כיצד להוסיף את דקורטור הפלט לרכיב ילד

ראשית, תצטרך ליצור אפליקציית Angular חדשה עם רכיב אב ורכיב צאצא.

ברגע שיש לך רכיב הורה וילד, תוכל להשתמש ב-Output decorator כדי להעביר נתונים ולהאזין לאירועים בין שני הרכיבים.

1. ליצור חדש יישום זוויתי. כברירת מחדל, "אפליקציה" הוא השם של רכיב השורש. רכיב זה כולל שלושה קבצים עיקריים: "app.component.html", "app.component.css" ו-"app.component.ts".
2. בדוגמה זו, רכיב ה"אפליקציה" ישמש כרכיב האב. החלף את כל התוכן ב-"app.component.html" בדברים הבאים:
   instagram viewer

   <divמעמד="רכיב-הורה">
   <h1> זהו מרכיב האב h1>
   div>

3. הוסף קצת סטיילינג לרכיב אפליקציית האב ב-"app.component.css":

   .parent-component {
   משפחת גופן: אריאל, Helvetica, פונט סאנס סריף;
   צבע רקע: קורל אור;
   ריפוד: 20פיקסלים
   }

4. השתמש בפקודה "ng create component" כדי ליצור רכיב Angular חדש נקרא "רכיב נתונים". בדוגמה זו, "רכיב נתונים" ייצג את רכיב הצאצא.

   ng g c data-component

5. הוסף תוכן לרכיב הצאצא ב-"data-component.component.html". החלף את התוכן הנוכחי כדי להוסיף לחצן חדש. קשר את הכפתור לפונקציה שתפעל כאשר המשתמש ילחץ עליה:

   <divמעמד="רכיב ילד">
   <ע> זה מרכיב הילד ע>
   <לַחְצָן (נְקִישָׁה)="onButtonClick()">לחץ עלילַחְצָן>
   div>

6. הוסף קצת סגנון לרכיב הצאצא ב-"data-component.component.css":

   .child-component {
   משפחת גופן: אריאל, Helvetica, פונט סאנס סריף;
   צבע רקע: כחול בהיר;
   שולים: 20פיקסלים;
   ריפוד: 20פיקסלים
   }

7. הוסף את הפונקציה onButtonClick() לקובץ TypeScript עבור הרכיב, ב-"data-component.component.ts":

   onButtonClick() {
   }

8. עדיין בתוך קובץ TypeScript, הוסף "פלט" ו-"EventEmitter" לרשימת הייבוא:

   יְבוּא { Component, Output, EventEmitter, OnInit } מ'@angular/core';

9. בתוך המחלקה DataComponentComponent, הכריז על משתנה Output עבור הרכיב שנקרא "buttonWasClicked". זה יהיה EventEmitter. EventEmitter הוא מחלקה מובנית המאפשרת ליידע רכיב אחר כאשר מתרחש אירוע.

   יְצוּאמעמד DataComponentComponent מיישם OnInit {
   @תְפוּקָה() buttonWasClicked = חָדָשׁ משדר אירועים<בָּטֵל>();
   // ...
   }

10. השתמש בפולט האירוע "buttonWasClicked" בתוך הפונקציה onButtonClick(). כאשר המשתמש לוחץ על הכפתור, רכיב הנתונים ישלח את האירוע הזה לרכיב אפליקציית האב.

    onButtonClick() {
    זֶה.buttonWasClicked.emit();
    }

כיצד להאזין לאירועים ברכיב הילד מתוך רכיב ההורה

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

1. השתמש ברכיב הצאצא בתוך "app.component.html". אתה יכול להוסיף את הפלט "buttonWasClicked" כמאפיין בעת ​​יצירת תג HTML. קשר את האירוע לפונקציה חדשה.

   <app-data-component (לחצו על הלחצן)="buttonInChildComponentWasClicked()">app-data-component>

2. בתוך "app.component.ts", הוסף את הפונקציה החדשה לטיפול באירוע לחיצת כפתור כאשר הוא מתרחש ברכיב הצאצא. צור הודעה כאשר המשתמש לוחץ על הכפתור.

   הוֹדָעָה: חוּט = ""
   buttonInChildComponentWasClicked() {
   זֶה.message = 'נלחץ על הכפתור ברכיב הילד';
   }

3. הצג את ההודעה ב-"app.component.html":

   <ע>{{הוֹדָעָה}}ע>

4. הקלד את הפקודה "ng serve" במסוף כדי להפעיל את יישום Angular שלך. פתח אותו בדפדפן אינטרנט ב-localhost: 4200. רכיבי ההורה והילד משתמשים בצבעי רקע שונים כדי להקל על ההבחנה ביניהם.
5. הקלק על ה לחץ עלי לַחְצָן. רכיב הילד ישלח את האירוע לרכיב האב, שיציג את ההודעה.

כיצד לשלוח נתונים מרכיב ילד לרכיב הורה

ניתן גם לשלוח נתונים מהרכיב הבן לרכיב האב.

1. ב-"data-component.component.ts", הוסף משתנה כדי לאחסן רשימה של מחרוזות המכילות נתונים מסוימים.

   listOfPeople: חוּט[] = ['ג'ואי', 'ג'ון', 'ג'יימס'];

2. שנה את סוג ההחזרה של פולט האירועים של buttonWasClicked. שנה אותו מבטל למחרוזת[], כדי להתאים לרשימת המחרוזות שהצהרת בשלב הקודם:

   @תְפוּקָה() buttonWasClicked = חָדָשׁ משדר אירועים<חוּט[]>();

3. שנה את הפונקציה onButtonClick(). בעת שליחת האירוע לרכיב האב, הוסף את הנתונים כארגומנט לתוך הפונקציה emit():

   onButtonClick() {
   זֶה.buttonWasClicked.emit(זֶה.listOfPeople);
   }

4. ב-"app.component.html", שנה את התג "app-data-component". הוסף את ה-"$event" לפונקציה buttonInChildComponentWasClicked()‎. זה מכיל את הנתונים שנשלחו מהרכיב הבן.

   <app-data-component (לחצו על הלחצן)="buttonInChildComponentWasClicked($event)">app-data-component>

5. עדכן את הפונקציה ב-"app.component.ts" כדי להוסיף את הפרמטר עבור הנתונים:

   buttonInChildComponentWasClicked (dataFromChild: חוּט[]) {
   זֶה.message = 'נלחץ על הכפתור ברכיב הילד';
   }

6. הוסף משתנה חדש בשם "נתונים" כדי לאחסן את הנתונים המגיעים מהרכיב הבן:

   הוֹדָעָה: חוּט = ""
   נתונים: חוּט[] = []
   buttonInChildComponentWasClicked (dataFromChild: חוּט[]) {
   זֶה.message = 'נלחץ על הכפתור ברכיב הילד';
   זֶה.data = dataFromChild;
   }

7. הצג את הנתונים בדף HTML:

   <ע>{{data.join(', ')}}ע>

8. הקלד את הפקודה "ng serve" במסוף כדי להפעיל את יישום Angular שלך. פתח אותו בדפדפן אינטרנט ב-localhost: 4200.
9. הקלק על ה לחץ עלי לַחְצָן. רכיב הילד ישלח את הנתונים מהרכיב הבן לרכיב האב.

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

ישנם דקורטורים אחרים שתוכלו להשתמש בהם ב-Angular, כמו הדקורטור Input או Component decorator. אתה יכול ללמוד עוד על איך אתה יכול להשתמש במעצבים אחרים ב-Angular כדי לפשט את הקוד שלך.