Parent to child
הצהרה על המשתנה בקומפוננטה של ה-parent.
Parent ts file
public name = 'Dani';
שליחת המשתנה ל-child כשקוראים לקומפוננטה של ה-child לתוך משתנה parentData של ה-child.
Parent html file
<app-child [parentData]="name"></app-child>
קבלת הערך של המשתנה על ידי הגדרת המשתנה כ-Input ב-child.
Child ts file
@Input() public parentData;
// We can give parentData alias name
@Input(parentData) public name;
שימוש בערך שקבלנו ב-child בתוך הקומפוננטה של ה-child.
Child html file
<h2>Hello {{ parentData }}</h2>
דוגמא של filter
תאור יש לנו קומפוננטה של מוצרים שמכיל גריד של מוצרים. אנחנו רוצים לשים קומפוננטה של פילטר למוצרים. לכל קטגוריה בפילטר יהיה את מספר המוצרים שיש בקטגוריה.
אנחנו צריכים להעביר מידע מקומפוננטת האב של המוצרים לקומפוננטת הילד של הפילטר.
Parent to child – Input
נתחיל מחישוב של מספר המוצרים בקטגוריית החינם בקומפוננטת האב.
Parent ts file
getTotalFreeCourse(){
return this.courses.filter(course => course.type == 'free').length;
}
בקומפוננטת האב, נקרא לקומפוננטת הבן שהיא הפילטר.
נעביר את הערך מחישוב הפונקציה למשתנה free של הבן.
Parent html file
<filter-app [free]="getTotalFreeCourse()]</filter-app>
בקומפוננטת הבן נגדיר את המשתנה שיכיל את הערך שקבלנו.
Child ts file
@Input() public free;
עכשיו אפשר להשתמש בערך בקומפוננטת הבן
Child html file
{{ free }}
Child to parent – Output
בכיוון השני אנחנו רוצים להעביר את הערך שנבחר בפילטר לקומפוננטה של המוצרים כדי להציג רק את המוצרים שנבחרו.
בקומפוננטת הבן, הפילטר, נגדיר משתנה שיחזיק את הבחירה של הגולש.
Child ts file
selectedRadioButtonValue: string = 'all';
נגדיר גם פונקציה שתפעיל טריגר של אירוע. האירוע יופעל כשתהיה בחירה בקטגוריה.
Child ts file
selectedRadioButtonValue: string = 'all';
@Output()
filterButtonSelectChange: EventEmitter<string> = new EventEmitter<string>();
onButtonSelectedChange(){
this.filterButtonSelectChange.emit(this.selectedRadioButtonValue);
}
בקובץ ה-html נפעיל את הטריגר.
Child html file
<input type="radio" value="all" [(ngModel)]="selectedRadioButtonValue"
(change)="onButtonSelectedChange">
צריך לייבא את מודל הטפסים ל-app.
בקומפוננטת האב נגדיר משתנה שיקבל את הבחירה של המשתמש ונגדיר פונקציה שתופעל כשהאירוע עולה מקומפוננטת הבן.
Parent ts file
courseRadioSelectedFilter: string = "all";
onFilterRadioChanged(data: string){
this.courseRadioSelectedFilter = data;
}
בקומפוננטת ההורה נחבר את הפונקציה כשקוראים לקומפוננטת הפילטר של הבן
Parent html file
<filter-app [free]="getTotalFreeCourse()"
(filterButtonSelectChange)="onFilterRadioChanged($event)"></filter-app>
עכשיו אפשר לפלטר את המוצרים בקומפוננטת האב. אם אנחנו משתמשים ב-ngFor כדי לייצר את המוצרים, אי אפשר להשתמש ב-ngIf על אותו אלמנט html. נזיז החוצה את ה-for.
Parent html file
<ng-container *ngFor="let course of courses">
<div class="course-container" *ngIf="courseRadioSelectedFilter === 'all' ||
courseRadioSelectedFilter === course.type">
...
</div>
</ng-container>
Child to parent
העברת מידע מהילד להורה על ידי אירוע.
הגדרת משתנה האירוע בילד ואת הפונקציה שמטפלת באירוע.
Child ts file
@Output() public childEvent = new EventEmitter();
fireEvent(){
this.childEvent.emit("Welcome to the class");
}
הפעלת הטריגר של האירוע בתבנית הילד
Child html file
<button (click)="fireEvent()">Send Event</button>
הגדרת משתנה שיקבל את הערך בהורה.
Parent ts file
public message = "";
קבלת האירוע של הילד בקריאה לקומפוננטה של הילד ושימוש בערך המשתנה
Parent html file
<app-child (childEvent)="message=$event"></app-child>
<h2>{{ message }}</h2>
דוגמא של חיפוש
קומפוננטת האב מכירה מוצרים, קומפוננטת הבן היא קומפוננטת החיפוש.
Child to parent
הגדרת המשתנה שיחזיק את מילת החיפוש, יצירת האירוע שיחזיק את השינוי במילת החיפוש של הילד.
יצירת הפונקציה שמפעילה את האירוע.
Child search.ts
enteredSearchValue: string = '';
@Output()
searchTextChanged: EventEmitter<string> = new EventEmitter<string>();
onSearchTextChange(){
this.searchTextChanged.emit(this.enteredSearchValue);
}
נפעיל את האירוע כשהמשתמש יקליד ערך לחיפוש
Child search.html
<div class="search-container">
<span>Search: </span>
<input type="text" [(ngModel)]="enteredSearchValue" (input)="onSearchTextChange()">
</div>
בקומפוננטת האב נגדיר משתנה לקבל את הערך שזרק האירוע.
Parent products.ts
searchText: string = '';
onSearchTextEntered(searchValue: string){
this.searchText = searchValue;
}
נקרא לקומפוננטת הבן ונקבל את האירוע ממנה, נשתמש בערך שנכנס למחרוזת החיפוש על מנת לסנן את התוצאות שאנחנו מציגים.
Parent products.html
<app-search (searchTextChanged)="onSearchTextEntered($event)"></app-search>
<ng-container *ngFor="let product of products">
<div class="product-container" *ngIf="searchText === '' ||
product.name.toLowerCase().includes(searchText)">
</div>
</ng-container>