تفاعل المكوّنات

في هذا الدرس، ستتعلّمون كيفية تواصل المكوّنات في Angular، ولا سيما بين المكوّنات الأب والمكوّنات الابنة.

التفاعل بين الأب والابن

تحتاج المكوّنات غالبًا إلى مشاركة البيانات. ويمكن للمكوّنات الأب تمرير البيانات إلى المكوّنات الابنة باستخدام خصائص الإدخال.

استخدام @Input()

استخدموا مُزخرف @Input() لاستقبال البيانات من مكوّن أب:

@Input() userData: string;

تمرير البيانات إلى المكوّن الابن

في قالب المكوّن الأب، مرّروا البيانات باستخدام ربط الخصائص:

<app-child [userData]="parentData"></app-child>

التواصل من الابن إلى الأب

تتواصل المكوّنات الابنة مع المكوّنات الأب عبر الأحداث باستخدام مُزخرف @Output().

استخدام @Output()

أنشئوا باعث أحداث لإرسال البيانات من المكوّن الابن إلى المكوّن الأب:

@Output() dataEvent = new EventEmitter<string>();

إصدار الأحداث

أصدروا الأحداث من المكوّن الابن:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

الاستماع إلى الأحداث في المكوّن الأب

عالجوا الأحداث الصادرة في قالب المكوّن الأب:

<app-child (dataEvent)="handleEvent($event)"></app-child>

الملخص

أصبحتم الآن تفهمون كيفية تفاعل المكوّنات من خلال المدخلات والمخرجات في Angular. واصلوا التدرّب!