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>