65. تفاعل المكونات: المُزخرف Input

تشكل المكونات تسلسلاً هرمياً (أب-ابن). الطريقة الأساسية لتمرير البيانات لأسفل شجرة المكونات (من الأب إلى الابن) هي استخدام المُزخرف @Input().

1. تحديد الإدخال في مكون الابن

يشير المُزخرف @Input() إلى خاصية في فئة مكون الابن على أنها متاحة للربط بواسطة قالب الأب.

typescript // product-detail.component.ts (الابن) import { Component, Input } from '@angular/core';

interface Product { name: string; price: number; }

@Component({ /* ... */ }) export class ProductDetailComponent {

// تحديد الخاصية التي ستتلقى البيانات من الأب @Input() productData: Product | undefined;

// يمكنك أيضاً تعيين اسم مستعار للإدخال: @Input('stockLevel') quantity: number = 0;

// يستخدم المنطق البيانات المستلمة get status() { return this.quantity > 0 ? 'In Stock' : 'Out of Stock'; } }

2. تمرير البيانات من مكون الأب

يستخدم مكون الأب ربط الخاصية ([ ]) لتعيين قيمة خصائص الإدخال للابن.

typescript // parent.component.ts export class ParentComponent { selectedProduct: Product = { name: 'Widget Pro', price: 99.99 }; }

html

<app-product-detail [productData]="selectedProduct" [stockLevel]="15">

ملاحظة: يجب أن تكون المدخلات غير خاصة (non-private). إذا تم تمرير كائن عبر @Input، فيجب أن يتعامل معه مكون الابن على أنه ثابت (للقراءة فقط). إذا قام الابن بتغيير (mutates) الكائن، فلن يعرف الأب إلا إذا كان يستخدم استراتيجية اكتشاف التغيير OnPush، مما يؤدي إلى أخطاء يصعب تتبعها.