الزاوي. فهم @ الإدخال و @ الإخراج و EventEmitter

مرحبا يا هبر! أقدم إليكم ترجمة المقالة "UnderstandingInput و @ Output و EventEmitter in Angular" بواسطة foolishneo .

تحية لجميع الذين يرغبون في تجميع المعلومات حول تعقيدات الإطار الزاوي.

اعتقدت اليوم أنه من الضروري دراسة المعلومات المتعلقة بتنظيم التفاعل بين المكونات الزاوي بشكل أفضل والبدء في ممارسة ترجمة المقالات التي تهمني من اللغة الإنجليزية.

آمل أن يكون هناك أولئك الذين ستكون ترجمة المقالة من متوسطة مفيدة لهم.

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

بالنسبة لأولئك الجدد في Angular ، يمكن أن تكون مربعات الإدخال والإخراج محرجة ، خاصة عندما تحاول معرفة الغرض منها باستخدام نماذج الكود. في هذه المقالة ، سأحاول شرحها بأبسط طريقة ممكنة.

أداة تبادل البيانات

أولاً وقبل كل شيء ، تتمثل مهمة أدوات الإدخال والإخراج في تبادل البيانات بين المكونات. إنها آلية لتلقي / إرسال البيانات من مكون إلى آخر.

يتم استخدام الإدخال لتلقي البيانات ، بينما يتم استخدام الإخراج لإرسالها. يرسل الإخراج البيانات عن طريق تعريضها كمنتجين للحدث ، عادةً ككائنات من فئة EventEmitter.

وبالتالي ، عندما ترى الرمز ، في شكل هذا:

@Component({ selector: 'todo-item', ... }) export class TodoItemComponent { @Input() item @Output() onChange = new EventEmitter() } 

يعني:

• مهلا ، أتوقع أن ترسل البيانات إليّ. سأحصل عليها وحفظها كقيمة خاصية العنصر.
  
• بالمناسبة ، سأكون السبب في إرسال البيانات باستخدام خاصية onChange.
  

لنفترض أن لديك مكون TodoList يحتوي على مكون TodoItem .
في قالب مكون TodoLis ، تتوقع أن ترى:

 ... <todo-item [item]="myTask" (onChange)="handleChange($event)" </todo-item> ... 

ماذا يعني:

• المكون TodoList يضع قيمة البيانات في خاصية myTask ويمررها إلى المكون TodoItem
  
• سيتم استلام البيانات المنقولة من مكون TodoItem ومعالجتها بواسطة دالة handleChange () الخاصة بمكون TodoList
  

يكفي نظرية. لنلقِ نظرة على مثال.

@ المدخلات والمخرجات في العمل.

إيلاء الاهتمام لمثال.

أنا هنا خلقت مكونين ، مكون hello ، متداخل في مكون التطبيق . يحتوي مكون الترحيب على المدخلات والمخرجات :

 hello.component.ts @Component({ selector: 'hello', template: ` <h3 (click)="onClick.emit('Neo')"> ... </h3> ` }) export class HelloComponent { @Input() myFriend: string @Output() onClick = new EventEmitter() } 

يتوقع مكون hello الحصول على قيمة سلسلة ووضعها كقيمة لخاصية myFriend .

 @Input() myFriend: string 

في كل مرة تنقر فوقها ، ستنقل خاصية إرسال البيانات onClick الخاصة بديكور الإخراج إلى "العالم الخارجي" سلسلة تحتوي على محتويات "Neo".

 <h3 (click)="onClick.emit('Neo')"> 

يوجد أدناه رمز مكون التطبيق :

 app.component.ts export class AppComponent { ng = 'Angular' myName = 'Neo' upCase(st:string): void { ... } } app.component.html <hello myFriend="{{ ng }}" (onClick)="upCase($event)"></hello> <h3>My name is {{ myName }}</h3> 

لاحظ أن مكون التطبيق يستخدم علامة مكون hello في القالب الخاص به ، والذي يؤدي إجراءين:

• يمرر قيمة السلسلة 'Angular' إلى مكون hello باستخدام خاصية ng
  
• ويستقبل القيمة المرسلة من مكون hello ويعالج القيمة المستلمة باستخدام دالة upCase ():
  

 <hello myFriend="{{ ng }}" (onClick)="upCase($event)"> 

تستطيع أن ترى في التطبيق في العمل هنا.