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>