در حال بارگذاری...

ارتباط بین کامپوننت‌ها

ارتباط بین کامپوننت‌ها در انگولار یکی از اصول حیاتی توسعه برنامه‌های وب مدرن و SPAها است. در انگولار، هر کامپوننت وظیفه دارد UI، منطق و وضعیت خود را مدیریت کند، اما در اغلب برنامه‌ها نیاز است که داده‌ها و رویدادها بین کامپوننت‌ها منتقل شود. ارتباط موثر بین کامپوننت‌ها تضمین می‌کند که جریان داده‌ها شفاف، پایدار و قابل نگهداری باشد و از مشکلاتی مانند prop drilling، re-renderهای غیرضروری و mutationهای غیرمنتظره جلوگیری شود.
انگولار برای این منظور ابزارهای متنوعی ارائه می‌دهد. از Input و Output برای ارتباط مستقیم بین کامپوننت‌های والد و فرزند گرفته تا استفاده از سرویس‌ها و RxJS برای مدیریت وضعیت و داده‌ها در کامپوننت‌های غیرمرتبط. همچنین درک چرخه عمر کامپوننت‌ها (lifecycle hooks) و جریان داده‌ها (data flow) به برنامه‌نویسان کمک می‌کند تا ارتباط بین کامپوننت‌ها را به شکل بهینه پیاده‌سازی کنند.
در این آموزش، شما خواهید آموخت که چگونه از Input، Output، EventEmitter و سرویس‌های مشترک برای ایجاد الگوهای ارتباطی مؤثر و قابل بازاستفاده استفاده کنید. همچنین نحوه مدیریت وضعیت، بهینه‌سازی عملکرد و پیاده‌سازی جریان داده‌ها در پروژه‌های واقعی انگولار بررسی خواهد شد. پس از مطالعه این آموزش، شما قادر خواهید بود معماری‌هایی مقیاس‌پذیر و نگهداری‌پذیر با ارتباط بین کامپوننت‌ها در انگولار ایجاد کنید.

مثال پایه

typescript
TYPESCRIPT Code 
// parent.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'app-parent',
template: `     <h2>کامپوننت والد</h2>     <app-child [childData]="parentMessage" (notify)="handleNotify($event)"></app-child>     <p>پیام دریافتی از فرزند: {{ messageFromChild }}</p>
`
})
export class ParentComponent {
parentMessage = 'سلام از کامپوننت والد';
messageFromChild: string = '';

handleNotify(event: string) {
this.messageFromChild = event;
}
}

// child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-child',
template: `     <h3>کامپوننت فرزند</h3>     <p>داده دریافتی: {{ childData }}</p>     <button (click)="sendMessage()">ارسال پیام به والد</button>
`
})
export class ChildComponent {
@Input() childData!: string;
@Output() notify = new EventEmitter<string>();

sendMessage() {
this.notify.emit('سلام از کامپوننت فرزند');
}
}

در این مثال، ارتباط بین کامپوننت والد و فرزند از طریق Input و Output برقرار شده است. ParentComponent متغیر parentMessage را به ChildComponent ارسال می‌کند و ChildComponent از طریق @Output() و EventEmitter یک پیام به والد ارسال می‌کند. این رویکرد جریان داده یک‌طرفه (unidirectional data flow) را تضمین می‌کند و تغییرات به صورت خودکار توسط change detection انگولار مدیریت می‌شود. این روش از prop drilling جلوگیری می‌کند و موجب کاهش re-renderهای غیرضروری می‌شود. همچنین این الگو پایه‌ای برای مدیریت وضعیت و ارتباط بین کامپوننت‌های بزرگ و پیچیده فراهم می‌کند.

مثال کاربردی

typescript
TYPESCRIPT Code 
// shared.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SharedService {
private messageSource = new BehaviorSubject<string>('پیام اولیه');
currentMessage = this.messageSource.asObservable();

updateMessage(message: string) {
this.messageSource.next(message);
}
}

// sender.component.ts
import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
selector: 'app-sender',
template: `     <h2>فرستنده</h2>     <input [(ngModel)]="newMessage" placeholder="پیام خود را وارد کنید">     <button (click)="sendMessage()">ارسال</button>
`
})
export class SenderComponent {
newMessage: string = '';

constructor(private sharedService: SharedService) {}

sendMessage() {
this.sharedService.updateMessage(this.newMessage);
}
}

// receiver.component.ts
import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
selector: 'app-receiver',
template: `     <h2>گیرنده</h2>     <p>پیام فعلی: {{ message }}</p>
`
})
export class ReceiverComponent implements OnInit {
message: string = '';

constructor(private sharedService: SharedService) {}

ngOnInit() {
this.sharedService.currentMessage.subscribe(msg => this.message = msg);
}
}

در مثال کاربردی، ارتباط بین کامپوننت‌های غیرمرتبط از طریق سرویس مشترک SharedService و BehaviorSubject برقرار شده است. SenderComponent با استفاده از متد updateMessage پیام جدیدی ارسال می‌کند و ReceiverComponent به‌صورت ریاکتیو این پیام را دریافت و نمایش می‌دهد. استفاده از BehaviorSubject امکان مدیریت جریان داده ریاکتیو و ایجاد یک Single Source of Truth را فراهم می‌کند. Dependency Injection باعث می‌شود سرویس singleton باشد و عملکرد بهینه‌تری در بروزرسانی کامپوننت‌ها حاصل شود. این الگو مقیاس‌پذیری، نگهداری آسان و جداسازی UI از منطق کسب‌وکار را تضمین می‌کند.

بهترین شیوه‌ها در ارتباط بین کامپوننت‌ها شامل استفاده از Input و Output، سرویس‌های مشترک، و RxJS برای مدیریت ریاکتیو داده‌ها است. از اشتباهات رایج می‌توان به prop drilling، تغییر مستقیم state و re-renderهای غیرضروری اشاره کرد. برای دیباگ و تحلیل جریان داده‌ها می‌توان از Angular DevTools استفاده کرد. بهینه‌سازی عملکرد شامل استفاده از OnPush Change Detection، Async Pipe و جداسازی منطق UI از داده است. همچنین اعتبارسنجی داده‌های ورودی برای امنیت کامپوننت‌ها ضروری است. رعایت این شیوه‌ها موجب توسعه برنامه‌های نگهداری‌پذیر، مقیاس‌پذیر و پرکارآمد می‌شود.

📊 جدول مرجع

انگولار Element/Concept Description Usage Example
Input دریافت داده از والد @Input() childData: string;
Output ارسال رویداد به والد @Output() notify = new EventEmitter<string>();
EventEmitter ارتباط مبتنی بر رویداد this.notify.emit('پیام');
Service اشتراک‌گذاری state بین کامپوننت‌ها this.sharedService.updateMessage('پیام');
BehaviorSubject جریان داده Observable ریاکتیو private messageSource = new BehaviorSubject<string>('Initial');
ngOnInit Hook چرخه عمر برای اشتراک داده ngOnInit() { this.sharedService.currentMessage.subscribe(msg => this.message = msg); }

یادگیری ارتباط بین کامپوننت‌ها به شما امکان ایجاد برنامه‌های انگولار مقیاس‌پذیر و پرکارآمد را می‌دهد. با استفاده از Input، Output، EventEmitter و سرویس‌های مشترک، جریان داده‌ها واضح و کنترل‌شده خواهد بود. مراحل بعدی شامل یادگیری مدیریت وضعیت پیشرفته با NgRx، OnPush ChangeDetection و جریان‌های داده‌ای asynchronous است. با انجام پروژه‌های عملی و استفاده از Angular DevTools، دانش و مهارت شما در توسعه اپلیکیشن‌های حرفه‌ای انگولار افزایش می‌یابد.

کلیدواژه‌های مرتبط

کاربران همچنین با این عبارات این محتوا را جستجو می‌کنند:

ارتباط بین کامپوننت‌ها انگولار Input و Output انگولار EventEmitter انگولار سرویس مشترک انگولار مدیریت state انگولار RxJS در انگولار Prop drilling انگولار بهینه‌سازی عملکرد انگولار ngOnInit انگولار OnPush Change Detection انگولار SPA داده‌ها انگولار معماری مقیاس‌پذیر انگولار جریان داده ریاکتیو انگولار Angular DevTools انگولار

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
4
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Angular آموزش