מדריך Angular – העברת נתונים (Binding) באפליקציית אנגולר

מדריך Angular – העברת נתונים (Binding) באפליקציית אנגולר

אחרי שבמאמר הקודם למדנו על יצירת 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 באנגולר – כדאי להמשיך ולעקוב!

שתפו את הפוסט

דילוג לתוכן