Parent-Child কম্পোনেন্ট কমিউনিকেশন

Aurelia ফ্রেমওয়ার্কে Parent-Child কম্পোনেন্ট কমিউনিকেশন খুবই সহজ এবং কার্যকরী। একটি Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে ডেটা প্রেরণ, অথবা Child কম্পোনেন্ট থেকে Parent কম্পোনেন্টে ডেটা প্রেরণ করার জন্য ডাটাবাইন্ডিং, ইভেন্ট হ্যান্ডলিং, এবং Custom Events ব্যবহৃত হয়।

এখানে আমরা দেখবো কিভাবে Parent এবং Child কম্পোনেন্টের মধ্যে ডেটা শেয়ার করা যায়।

১. Parent থেকে Child কম্পোনেন্টে ডেটা পাঠানো

Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে ডেটা পাঠানোর জন্য ডাটাবাইন্ডিং ব্যবহার করা হয়। Parent কম্পোনেন্টের ভ্যালু Child কম্পোনেন্টের প্রোপার্টির সাথে বাইন্ড করা হয়।

উদাহরণ: Parent থেকে Child কম্পোনেন্টে ডেটা পাঠানো

1. Child কম্পোনেন্ট (child.js)

export class Child {
  message = '';  // Parent থেকে প্রাপ্ত ডেটা এখানে সেট হবে
}

2. Child কম্পোনেন্টের HTML (child.html)

<template>
  <p>${message}</p> <!-- Parent থেকে প্রাপ্ত ডেটা দেখানো হবে -->
</template>

3. Parent কম্পোনেন্ট (parent.js)

export class Parent {
  greeting = 'Hello from Parent!';
}

4. Parent কম্পোনেন্টের HTML (parent.html)

<template>
  <child message.bind="greeting"></child> <!-- Parent থেকে Child এ ডেটা পাঠানো -->
</template>

এখানে, message.bind="greeting" ব্যবহার করে Parent কম্পোনেন্টের greeting ভ্যালু Child কম্পোনেন্টের message প্রোপার্টির সাথে বাইন্ড করা হয়েছে। ফলে, Parent কম্পোনেন্টের greeting পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে Child কম্পোনেন্টের message-এ আপডেট হবে।

২. Child থেকে Parent কম্পোনেন্টে ডেটা পাঠানো

Child কম্পোনেন্ট থেকে Parent কম্পোনেন্টে ডেটা পাঠানোর জন্য Custom Event ব্যবহার করা হয়। Child কম্পোনেন্টে একটি কাস্টম ইভেন্ট তৈরি করা হয় এবং Parent কম্পোনেন্টে সেই ইভেন্ট হ্যান্ডল করা হয়।

উদাহরণ: Child থেকে Parent কম্পোনেন্টে ডেটা পাঠানো

1. Child কম্পোনেন্ট (child.js)

export class Child {
  constructor() {
    this.message = 'Hello from Child!';
  }

  sendToParent() {
    this.fire('message-sent', this.message); // কাস্টম ইভেন্ট ট্রিগার করা
  }

  fire(eventName, data) {
    const event = new CustomEvent(eventName, { detail: data });
    this.element.dispatchEvent(event);
  }
}

2. Child কম্পোনেন্টের HTML (child.html)

<template>
  <button click.delegate="sendToParent()">Send Message to Parent</button>
</template>

3. Parent কম্পোনেন্ট (parent.js)

export class Parent {
  constructor() {
    this.receivedMessage = '';
  }

  attached() {
    this.childElement.addEventListener('message-sent', (e) => {
      this.receivedMessage = e.detail;  // Child থেকে পাঠানো ডেটা গ্রহন
    });
  }
}

4. Parent কম্পোনেন্টের HTML (parent.html)

<template>
  <child ref="childElement"></child> <!-- Child কম্পোনেন্টের রেফারেন্স -->
  <p>Message from Child: ${receivedMessage}</p> <!-- Parent-এ প্রাপ্ত ডেটা -->
</template>

এখানে, Child কম্পোনেন্টে sendToParent() মেথডটি কল করা হলে, একটি কাস্টম ইভেন্ট message-sent ট্রিগার হবে এবং Parent কম্পোনেন্টে সেই ইভেন্টটি লিসেন করা হবে। Parent কম্পোনেন্টে ইভেন্টের detail প্রোপার্টি থেকে ডেটা গ্রহণ করা হবে।

৩. Two-Way Communication (Parent-Child এর মধ্যে ডেটা পরিবর্তন করা)

আপনি যখন চান যে Parent এবং Child কম্পোনেন্ট একে অপরের মধ্যে ডেটা শেয়ার করুক এবং উভয়েই সেই ডেটা পরিবর্তন করতে পারুক, তখন Two-Way Binding ব্যবহার করতে হবে।

উদাহরণ: Two-Way Communication

1. Child কম্পোনেন্ট (child.js)

export class Child {
  @bindable message = '';  // message প্রোপার্টি Parent থেকে বাইন্ড করা হবে
}

2. Child কম্পোনেন্টের HTML (child.html)

<template>
  <input type="text" value.bind="message" />  <!-- Child-এ ইনপুট ফিল্ড -->
  <p>Message in Child: ${message}</p>  <!-- Child-এ প্রাপ্ত ডেটা -->
</template>

3. Parent কম্পোনেন্ট (parent.js)

export class Parent {
  message = 'Hello from Parent to Child!';  // Parent থেকে Child-এ পাঠানো ডেটা
}

4. Parent কম্পোনেন্টের HTML (parent.html)

<template>
  <child message.bind="message"></child> <!-- Two-way Binding -->
  <p>Message in Parent: ${message}</p>  <!-- Parent-এ প্রাপ্ত ডেটা -->
</template>

এখানে, message.bind="message" দ্বারা Parent কম্পোনেন্টের message ভ্যারিয়েবল এবং Child কম্পোনেন্টের message প্রোপার্টি একে অপরের সাথে বাইন্ড করা হয়েছে। এখন যখন Parent বা Child কোনো একটি ভ্যালু পরিবর্তন করবে, তা অপর কম্পোনেন্টে স্বয়ংক্রিয়ভাবে আপডেট হবে।

উপসংহার

Aurelia তে Parent-Child কম্পোনেন্ট কমিউনিকেশন খুবই সহজ এবং শক্তিশালী। ডাটাবাইন্ডিং এবং Custom Events ব্যবহার করে আপনি খুব সহজেই ডেটা শেয়ার করতে পারেন। Aurelia-র two-way data binding সুবিধা, custom event এবং injectable services এর মাধ্যমে Parent এবং Child কম্পোনেন্টগুলোর মধ্যে যোগাযোগকে আরও সহজ এবং কার্যকরী করা সম্ভব।