freeCodeCamp/guide/arabic/angular/data-binding/index.md

---
title: Data Binding
localeTitle: ربط البيانات
---
# ربط البيانات

#### التحفيز

غالبًا ما تحدد البيانات مظهر التطبيق. يتضمن تفسير تلك البيانات في واجهة المستخدم منطق منطقي ( `.component.html` ) وعرض قالب ( `.component.ts` ). الزاوي يربطهم من خلال ربط البيانات. فكر في ربط البيانات كأداة لتفاعل المكون.

#### المكون والقالب

يخزن العنصر معظم منطقه وبياناته داخل صفه المزين بـ `@Component` . يعرّف هذا الديكور الفئة كمكون مع قالب HTML. يمثل قالب المكون الفئة داخل التطبيق. يجب أن يكون التركيز هنا بين فئة المكون ونموذج HTML.

هذا هو المكان الذي يحدث ربط البيانات. الحصول على خصائص العنصر والأحداث القيم المعينة. هذه القيم ، التي تم تعريفها بواسطة فئة المكون ، تخدم أيًا من الدورين. واحد هو لإنتاج البيانات التي يتلقاها القالب. يعالج الآخر الأحداث المنبعثة من عنصر القالب.

![مثال الكود](https://raw.githubusercontent.com/sosmaniac-FCC/designatedata/master/image4.png)

حاول استخدام هذه الصورة كنموذج ذهني للقسم التالي.

#### اتجاهات ملزمة

هناك طريقتان للربط بين البيانات: أحادي الاتجاه وثنائي الاتجاه. يستخدم الزاوي تقنياً تدفق البيانات أحادي الاتجاه فقط. تدفق ثنائي الاتجاه هو في نهاية المطاف أحادي الاتجاه. يحدث ذلك في تطبيقين لتدفق أحادي الاتجاه ، مرة واحدة لكل اتجاه. المزيد عن ذلك لاحقا.

يحدد التدفق الأحادي الاتجاه التفاعل أحادي الاتجاه. إما أن يرسل المكون البيانات إلى القالب أو يرسل القالب حدثًا إلى منطق المكون. لا يتم تغيير بيانات التغييرات داخل نطاق القالب لفئة المكون. إنبعاث الحدث عبارة عن معاملة أحادية الاتجاه تبدأ من عناصر القالب.

ثنائي الاتجاه يشكل كلا الاتجاهين. وهذا يعني أن التغييرات في البيانات في منطق الصف أو HTML النموذج تستمر عبر بعضها البعض. نطاق التغييرات هو عرض المكون. يتكون العرض من فئة المكون والقالب معًا.

#### خصائص العنصر

للتعرف على خصائص العناصر المرتبطة بالبيانات ، يستخدم Angular بنية قوس خاصة.

 `// my.component.ts 
 @Component({ 
  templateUrl: './my.component.html' 
 }) 
 
 export class MyComponent { 
  value:type = /* some value of type */; 
 } 
` 

 `
<!-- my.component.html --> 
 <any-element [property]=“value”>innerHTML</any-element> 
` 

تحمل معي على هذا.

`[property]` يعكس الخاصية في عقدة كائن عنصر كائن المجال (DOM). لا تخلط بين خصائص الكائن وسمات عنصر DOM. غالبًا ما تتشارك الخصائص والخصائص في الاسم نفسه وتفعل الشيء نفسه. هناك تمييز واحد واضح ومع ذلك.

تذكر أن `attr` (السمات) هي خاصية واحدة لعنصر DOM الأساسي. يتم الإعلان عنها عند إنشاء DOM مع قيم السمات التي تطابق تعريف العنصر. يحافظ على نفس القيمة بعد ذلك. تحتوي كل خصائص على حقل قيمة المفتاح الخاص بها في عقدة كائن DOM. هذه الخصائص هي post-instantiation mutable.

معرفة الفرق بين الصفات والخصائص. سيؤدي ذلك إلى فهم أفضل لكيفية ربط البيانات الزاوي بالخواص (ربط الملكية). بصعوبة لن تربط البيانات إلى سمات العنصر أبدًا. الاستثناءات لهذا نادرة جدا. مرة واحدة في المرة الأخيرة: تربط البيانات الزاوي البيانات إلى الخصائص ، وليس السمات!

بالإشارة إلى المثال ، فإن `[ … ]` في تخصيص خاصية العنصر لها معنى خاص. تظهر الأقواس أن `property` ملزمة بـ `“value”` على يمين المهمة.

`value` أيضا لها معنى خاص في سياق الأقواس. `value` بحد ذاتها هي سلسلة حرفية. يقرأه الزاوي ويتطابق مع قيمته ضد أعضاء فئة المكون. سيحل الزاوي محل قيمة سمة العضو المطابقة. يشير هذا بالطبع إلى نفس فئة المكون التي تستضيف نموذج HTML.

اكتمال تدفق أحادي الاتجاه من البيانات من المكون إلى القالب. يقدم العضو المطابق للتنازل الصحيح عن الخاصية المحتواة بين الأقواس `value` . لاحظ أن التغييرات على قيمة العضو في فئة المكون تتجه إلى القالب. هذا هو الكشف عن تغيير Angular في العمل. لا تؤثر التغييرات في نطاق القالب على عضو فئة المكون.

مفتاح السحب: يوفر عنصر المكون البيانات أثناء عرض القالب لها.

أخفقت في ذكر أن قيم البيانات يمكن أن تظهر أيضًا في `innerHTML` داخل المكون. يقوم هذا المثال الأخير بتطبيق أقواس مزدوجة مجعفة. يتعرف Angular على هذه الأقواس ويؤدي إلى `innerHTML` بيانات فئة المكون المطابقة إلى `innerHTML` الداخلي لل `div` .

 `
<div>The value of the component class member 'value' is {{value}}.</div> 
` 

#### التعامل مع الحدث

إذا كان المكون يوفر بيانات ، فإن القالب يوفر الأحداث.

 `// my.component.ts 
 @Component({ 
  templateUrl: './my.component.html' 
 }) 
 
 export class MyComponent { 
  handler(event):void { 
      // function does stuff 
  } 
 } 
` 

 `
// my.component.html 
 <any-element (event)=“handler($event)”>innerHTML</any-element> 
` 

هذا يعمل بالمثل لربط الملكية.

يتعلق `(event)` بأي نوع حدث صالح. على سبيل المثال ، أحد أنواع الأحداث الأكثر شيوعًا هو `click` . تنبعث عند _النقر فوق_ الماوس. بغض النظر عن النوع ، يرتبط `event` بـ `“handler”` في المثال. عادة ما تكون معالجات الأحداث عادةً من وظائف العضو لفئة المكون.

تكون `( … )` خاصة بالزاوية. تشير الأقواس إلى Angular أن الحدث محصور بالواجب الصحيح `handler` . الحدث نفسه ينشأ من عنصر المضيف.

عندما ينبعث الحدث ، فإنه يمرر كائن الحدث في شكل `$event` . يعيّن `handler` إلى دالة `handler` مسماة بشكل مماثل للفئة المكون. اكتمل تبادل أحادي الاتجاه من العنصر المرتبط بالحدث إلى فئة المكون.

إن الأحداث التي تنبعث منها من المعالج ، رغم أنها ممكنة ، لا تؤثر على عنصر القالب. الربط هو أحادي الاتجاه بعد كل شيء.

#### ثنائي الاتجاه ملزم

تقدم نماذج المدخلات مثالاً عظيماً على أهمية ربط ثنائي الاتجاه. روابط البيانات ثنائية الاتجاه أكثر تكلفة من ربط الحدث أو الخاصية.

يحتوي ربط البيانات ثنائي الاتجاه على الوحدة الخاصة به. قبل إلقاء نظرة على ذلك ، والنظر في المثال التالي.

 `// my.component.ts 
 @Component({ 
  templateUrl: './my.component.html' 
 }) 
 export class MyComponent { 
  inputValue:string = ""; 
 
  handler(event) { 
      this.inputValue = event.target.value; 
  } 
 } 
` 

 `
<!-- my.component.html --> 
 <input (input)=“handler($event)” [value]=“inputValue”> 
` 

حان الوقت لكسر هذا.

هذا المثال يجمع بين الاثنين السابقين. وهذا يفسر سبب كونها أكثر تكلفة. بعد المنطق ، افترض أن المستخدم يكتب شيئًا في عنصر الإدخال. يرسل العنصر حدث `input` إلى `handler` فئة مكون القالب. يعين المعالج عضو الفئة `inputValue` إلى قيمة الحدث الذي تم `inputValue` . هذا يختم التعامل مع الحدث / ملزمة.

الآن على الممتلكات ملزمة. تم تعيين `inputValue` لقيمة جديدة. نظرًا لأن `inputValue` يرتبط `value` عنصر الإدخال ، يتغير تغييره في البيانات إلى `value` خاصية عنصر الإدخال. تتطابق `value` عنصر الإدخال مع `inputValue` . هذا يخلص ملزمة الملكية.

هناك لديك ذلك. يحدث ربط البيانات ثنائي الاتجاه مع تطبيق كل من تطبيق الربط أحادي الاتجاه على التوالي. بناء الجملة هو فوضوي بعض الشيء على الرغم من.

الحمد لله ، يوفر Angular `NgModel` لتبسيط بناء الجملة. المثال التالي مرادف لما سبق.

 `// my.component.ts 
 @Component({ 
  templateUrl: './my.component.html' 
 }) 
 
 export class MyComponent { 
  inputValue:string = ""; 
 } 
` 

 `
<!-- my.component.html --> 
 <input [(ngModel)]=“inputValue”> 
` 

`ngModel` هو راحة لطيفة. يجب عليك استيراد FormsModule في جذر التطبيق الخاص بك قبل استخدامه. مع هذا التربيع ، يصبح ربط البيانات ثنائي الاتجاه أسهل للعمل معه.

لتعزيز كل ما تعلمته ، تحقق من هذه الصورة من [الوثائق](https://angular.io/guide/architecture-components#data-binding) الرسمية [Angular 1](https://angular.io/guide/architecture-components#data-binding) .

![مخطط تدفق البيانات](https://raw.githubusercontent.com/sosmaniac-FCC/designatedata/master/image2.png)

يمكنك تلخيص كل شيء بصريًا حتى هذه المرحلة بهذه الصورة. تحتوي وثائق Angular على الكثير من الصور الأخرى التي تستحق المشاهدة. هذا يكفي يكفي في ضوء نطاق هذه المادة.

#### مكون إلى مكون

لربط البيانات والأحداث عبر مكونات مختلفة ، يجب عليك استخدام مزخرفينInput وOutput. تكون المكونات الزاويّة في نطاق خاص. لا يمكن الوصول إلى أي عضو من أعضاء المكون من أي مكان خارج عرضه الأصلي.

ويشير decoratorInput إلى أن قيمة العضو يتم الحصول عليها من الوظيفة الرئيسية. هذا يتطلب التصور لفهم أفضل.

![مثال الكود](https://raw.githubusercontent.com/sosmaniac-FCC/designatedata/master/image3_.png)

لاحظ مرور عضو `value` الوالد إلى عضو `property` الطفل. هذا لن يكون ممكنا إذا كان `property` ليس لديه ديكورInput. المترجم الزاوي يعتمد عليه.

يوضح مثال آخر لـOutput كيف ينتقل الحدث من الطفل إلى الوالد. ضع في اعتبارك أنOutput تقريبًا يتعلق دائمًا بربط الأحداث المخصص.

![مثال الكود](https://raw.githubusercontent.com/sosmaniac-FCC/designatedata/master/image1.png)

تأكد من استيراد `EventEmitter` و `@Input` و `@Output` من `@angular/common` إذا كنت تنوي تكرار أي من هذه الأمثلة.

#### استنتاج

هذا مكان جيد للتوقف. ربط البيانات يمتد مجموعة واسعة من حالات الاستخدام. هذا الموضوع يستحق استكشافًا إضافيًا على [موقع Angular](https://angular.io) . هذه ليست الطرق الوحيدة التي يمكنك التعامل مع البيانات في Angular. انظر الروابط تحت الموارد لمزيد من المعلومات.

### مصادر

1.  [فريق الزاوي. مقدمة إلى المكونات. جوجل. تم الوصول إليها في 26 مايو 2018](https://angular.io/guide/architecture-components#data-binding)

### مصادر

*   [وثائق الزاوي](https://angular.io/docs)
    
*   [Angular GitHub Repository](https://github.com/angular/angular)
    
*   [المزيد عن المكونات والقوالب في Angular](https://angular.io/guide/displaying-data)