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>
अपनी सर्विस से उत्पादों को कंपोनेंट में प्राप्त करें और उन्हें कंपोनेंट के टेम्पलेट में आउटपुट करें।
अपनी सर्विस में एक नया उत्पाद जोड़ने के लिए एक मेथड बनाएं। कंपोनेंट में एक बटन बनाएं, जिस पर क्लिक करने पर एक नया उत्पाद जुड़ जाए।
दो इनपुट और एक बटन के साथ एक फॉर्म बनाएं, जिस पर दबाने से एक नया उत्पाद जोड़ा जाएगा।
