אחרי שבמאמר הקודם למדנו על יצירת Components באנגולר, כעת נלמד על Binding.
באפליקציות אנגולר, Binding והעברת נתונים הם חלקים קריטיים בתקשורת בין קומפוננטות. במאמר זה נעמיק בטכניקות שונות לביצוע Binding, כולל One-way, Two-way ו-Event Binding, ונלמד כיצד להעביר נתונים בין קומפוננטות שונות בצורה יעילה.
One-way Data Binding
One-way Data Binding מאפשר לנו להעביר נתונים מהקומפוננטה לתצוגה בלבד. זהו הסוג הפשוט ביותר של Binding.
נניח שיש לנו קומפוננטה בשם AppComponent
עם משתנה בשם title
:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
{{ title }}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Welcome to Angular';
}
Event Binding
Event Binding מאפשר לנו להגיב לאירועים ב-DOM ולהעביר מידע מהתצוגה לקומפוננטה. לדוגמה, נשתמש באירוע click
כדי לעדכן משתנה בקומפוננטה:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Change Title
{{ title }}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Welcome to Angular';
changeTitle() {
this.title = 'Title Changed!';
}
}
Two-way Data Binding
Two-way Data Binding מאפשר לנו להעביר נתונים בין הקומפוננטה לתצוגה ולהיפך בצורה סימולטנית. נשתמש ב-ngModel
כדי לממש את זה בטפסים:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Hello, {{ name }}!
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
name: string = '';
}
העברת נתונים בין קומפוננטות
לפעמים נדרש להעביר נתונים בין קומפוננטות הורה וילד. נשתמש ב-@Input
ו-@Output
כדי לממש זאת:
@Input להעברת נתונים מהורה לילד
בקומפוננטת ההורה, נשלח נתונים לילד דרך @Input
:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
parentMessage = 'Message from Parent';
}
בקומפוננטת הילד, נקבל את הנתונים בעזרת @Input
:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
{{ childMessage }}
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() childMessage: string;
}
@Output להעברת נתונים מילד להורה
בקומפוננטת הילד, נשתמש ב-@Output
וב-EventEmitter
כדי לשלוח נתונים להורה:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Send Message
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Output() messageEvent = new EventEmitter();
sendMessage() {
this.messageEvent.emit('Message from Child');
}
}
בקומפוננטת ההורה, נקבל את הנתונים מהילד בעזרת (messageEvent)
:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
{{ parentMessage }}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
parentMessage: string;
receiveMessage($event) {
this.parentMessage = $event;
}
}
סיכום
במאמר זה סקרנו את הטכניקות השונות לביצוע Binding והעברת נתונים באפליקציית אנגולר, כולל One-way Data Binding, Event Binding, Two-way Data Binding והעברת נתונים בין קומפוננטות הורה וילד. שימוש נכון בטכניקות אלו יאפשר לכם לבנות אפליקציות אנגולר מורכבות ויעילות יותר. אם אתם מעוניינים ללמוד בצורה מעמיקה יותר, אתם מוזמנים להתייעץ איתנו על קורס אנגולר.
במאמר הבא נלמד על שימוש ב Directives באנגולר – כדאי להמשיך ולעקוב!