Angular-এ একটি পরিষেবা ব্যবহার করা
পূর্ববর্তী পাঠে, আমরা আমাদের নিজস্ব
পরিষেবা DataService তৈরি করেছিলাম। এখন আসুন
এটিকে কম্পোনেন্টে ইম্পোর্ট করি:
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // এখানে
@Component ডেকোরেটরের
providers প্রপার্টিতে
আমাদের পরিষেবা উল্লেখ করতে হবে:
@Component({
.....
providers: [ DataService ] // এখানে
})
এখন আমরা একটি বিশেষ পদ্ধতি ব্যবহার করব, যাকে নির্ভরতা ইনজেকশন (dependency injection) বলা হয়। এর মূল বিষয়টি হল যে কম্পোনেন্টের কনস্ট্রাক্টরে আমরা আমাদের পরিষেবাকে একটি প্যারামিটার হিসেবে পাস করতে পারি এবং এটি স্বয়ংক্রিয়ভাবে আমাদের কম্পোনেন্টের প্রাইভেট প্রপার্টিতে চলে আসবে। কোডে দেখুন:
export class AppComponent {
constructor(private dataService: DataService) { // নির্ভরতা ইনজেক্ট করছি
console.log(this.dataService); // প্রাইভেট প্রপার্টিতে পরিষেবা
}
}
আমাদের পরিষেবার জন্য ইনজেকশন কাজ করছে,
কারণ আমরা আগে এটিতে
Injectable ডেকোরেটর প্রয়োগ করেছিলাম।
এখন আসুন কম্পোনেন্ট ক্লাসের কনস্ট্রাক্টরে আমাদের পরিষেবা থেকে ডেটা পাই, সংশ্লিষ্ট মেথডটি কল করে:
export class AppComponent {
public data: string[] = [];
constructor(private dataService: DataService) {
this.data = this.dataService.getData();
}
}
আসুন প্রাপ্ত ডেটাগুলো কম্পোনেন্টের টেমপ্লেটে আউটপুট করি:
<ol>
<li *ngFor="elem of data">
{{ elem }}
</li>
</ol>
আপনার পরিষেবা থেকে পণ্যগুলো কম্পোনেন্টে পান এবং সেগুলো কম্পোনেন্টের টেমপ্লেটে আউটপুট করুন।
আপনার পরিষেবায় একটি নতুন পণ্য যোগ করার জন্য একটি মেথড করুন। কম্পোনেন্টে একটি বাটন করুন, যে ক্লিক করলে একটি নতুন পণ্য যোগ হবে।
দুটি ইনপুট এবং একটি বাটন সহ একটি ফর্ম করুন, যে টিপলে একটি নতুন পণ্য যোগ হবে।
