برمجة

مشاركة البيانات بين angular components باستخدام Input – Ouptut.

عند بناءك لموقع باستخدام angularjs وانشاء الكثير من components والانتقال بينهم.

بحيث يسهل عليك تخطيط وتصميم تركيبة مشروعك بشكل قابل للقراءة واكثر تنظيماً.

في هذه الحالات غالباً تحتاج ان تمرر بعض البيانات والقيم من component الى آخر بحيث يكمل العملية المتوقعة منه.

في هذه التدوينة راح اشرح كيف امرر بيانات الى component ومن ثم تجميع البيانات وطباعتها في component ثالث.

علاقة components مع بعضها تكون احدى الخيارين التاليين:

  1. parent -> child 
  2. child -> parent

parent -> child

يتم تضمين component بداخل component الاساسي للعملية ومن ثم تمرر البيانات من الأساسي الى الجزئي child component.

نستخدم Input Annotation

child -> parent

وهنا العكس من الجزئي child يتم تمرير البيانات الى component الاساسي.

نستخدم Output Annotation

 

 

ننشأ تطبيقنا و الكومبوننت اللي نتحاجها لتوضيح المثال بالاوامر التالية:

ng new sharingApp && cd sharingApp
ng g c second
ng g c final

الآن أنشأنا ( second , final ) ككمبوننت

بحيث يكون عندنا في التطبيق ( app,second,final)

سوف نمرر الداتا  من app الى second ومن ثم نطبعه .

هنا راح نغطي الجزء الاول من تمرير البيانات parent -> child

لتمرير البيانات في هذه الحالة يجب ان تضيف التاق الخاص بالكمبوننت child الممرر له واضافة البيانات الخاصة بنا.

app.component.html
<app-second [data]='myData'></app-second>
<!--
data: اللي بين الاقواس لازم يكون بنفس الاسم في الكومبوننت المستقبل
myData: هنا المتغير الذي بداخله البيانات ، لا يشترط نفس الاسم
-->

السؤال كيف يتم استقبال البيانات في الكومبوننت المستقبل؟

عن طريق Input Annotation

//second.component.ts
export class SecondComponent implements OnInit {

  @Input() data;
  constructor() { }

  ngOnInit() {
    console.log(this.data)
  }

}

ولكن ماذا لو اردنا عكس العملية ونريد ارسال بيانات بعد استقبالها والتعديل عليها. من child -> parent

الجزء الثاني من تمرير البيانات

child -> parent

سوف نستخدم Output Annotation مع EventEmmiter

EventEmitter

تمكننا من  ارسال البيانات بناء على Event محدد مثل الضغط على زر ارسال بعدها نستخدم emit method لارسال البيانات.

نستدعيها أولا

import { Component, OnInit, Input , Output, EventEmitter } from '@angular/core';

نستطيع تمرير اي نوع من البيانات ، في هذا المثال سوف نمرر نص فقط string

جرب تكتب اي اسم وتضغط على Send

second.component.html
<p> {{data | json}} </p>
<hr>
<input type="text" [(ngModel)]="address" />
<button (click)="send()">Send</button>
//second.component.ts
export class SecondComponent implements OnInit {

  @Input() data;
  @Output() secondOutput = new EventEmitter<String>();
  address;
  constructor() { }

  ngOnInit() {
    console.log(this.data)
  }
  send(){
    this.secondOutput.emit(this.address); // emit will pushing data to the parent
  }
}

الآن نقوم ببعض التعديلات لاستقبال البيانات في parent .

app.component.html
<app-second [data]='myData' (secondOutput)='show($event)' ></app-second>

<p>{{ secondData }}</p>

سوف نمرر البيانات الى الميثود show ومن ثم طباعتها.

//app.component.ts
export class AppComponent {
  title = 'app';
  myData:Object = { name:'Fahd', lastName:'Allebdi' };
  secondData:string;

  show(data){
    this.secondData = data;
  }
}

 

 


وبكذا تمت تغطية الجزئين في ارسال البيانات بين components .

 

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Back To Top