Angular-এ একটি পরিষেবা ব্যবহার করা

পূর্ববর্তী পাঠে, আমরা আমাদের নিজস্ব পরিষেবা DataService তৈরি করেছিলাম। এখন আসুন এটিকে কম্পোনেন্টে ইম্পোর্ট করি:

app/app.component.tsimport { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // এখানে

@Component ডেকোরেটরের providers প্রপার্টিতে আমাদের পরিষেবা উল্লেখ করতে হবে:

app/app.component.ts@Component({
  .....
  providers: [ DataService ] // এখানে
})

এখন আমরা একটি বিশেষ পদ্ধতি ব্যবহার করব, যাকে নির্ভরতা ইনজেকশন (dependency injection) বলা হয়। এর মূল বিষয়টি হল যে কম্পোনেন্টের কনস্ট্রাক্টরে আমরা আমাদের পরিষেবাকে একটি প্যারামিটার হিসেবে পাস করতে পারি এবং এটি স্বয়ংক্রিয়ভাবে আমাদের কম্পোনেন্টের প্রাইভেট প্রপার্টিতে চলে আসবে। কোডে দেখুন:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // নির্ভরতা ইনজেক্ট করছি
    console.log(this.dataService); // প্রাইভেট প্রপার্টিতে পরিষেবা
  }
}

আমাদের পরিষেবার জন্য ইনজেকশন কাজ করছে, কারণ আমরা আগে এটিতে Injectable ডেকোরেটর প্রয়োগ করেছিলাম।

এখন আসুন কম্পোনেন্ট ক্লাসের কনস্ট্রাক্টরে আমাদের পরিষেবা থেকে ডেটা পাই, সংশ্লিষ্ট মেথডটি কল করে:

app/app.component.tsexport class AppComponent {
  public data: string[] = [];
  
  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

আসুন প্রাপ্ত ডেটাগুলো কম্পোনেন্টের টেমপ্লেটে আউটপুট করি:

app/app.component.html<ol>
  <li *ngFor="elem of data">
    {{ elem }}
  </li>
</ol>