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>

ඔබගේ සේවාවෙන් භාණ්ඩ සංරචකය තුළට ලබාගෙන සංරචකයේ ටෙම්ප්ලේටය තුළ ඒවා ප්‍රදර්ශනය කරන්න.

නව භාණ්ඩයක් එකතු කිරීම සඳහා ඔබගේ සේවාව තුළ ක්‍රමයක් සාදන්න. සංරචකය තුළ බොත්තමක් සාදන්න, ක්ලික් කිරීමෙන් නව භාණ්ඩයක් එකතු වේ.

ආදාන දෙකක් සහ බොත්තමක් සහිත පෝරමයක් සාදන්න, එය මත ක්ලික් කිරීමෙන් නව භාණ්ඩයක් එකතු වේ.