Teenuse kasutamine Angularis

Eelmises õppetükis loome oma teenuse DataService. Nüüd impordime selle komponenti:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // siin

Dekoraatoris @Component omaduses providers tuleb määrata meie teenus:

@Component({
	.....
	providers: [ DataService ] // siin
})

Nüüd kasutame spetsiaalset lähenemist, mida nimetatakse sõltuvuse süstimiseks (dependency injection). Selle olemus seisneb selles, et komponendi konstruktoris saame oma teenuse edastada parameetrina ja see automaatselt satub meie komponendi privaatseks omaduseks. Vaadake koodis:

export class AppComponent {
	constructor(private dataService: DataService) { // süstime sõltuvuse
		console.log(this.dataService); // teenus privaatses omaduses
	}
}

Sõltuvuse süstimine meie teenuse jaoks töötab, kuna me varem rakendasime sellele dekoraatorit Injectable.

Nüüd komponendi klassi konstruktoris hankime andmed meie teenusest, käivitades vastava meetodi:

export class AppComponent {
	public data: string[] = [];
	
	constructor(private dataService: DataService) {
		this.data = this.dataService.getData();
	}
}

Väljastame saadud andmed komponendi mallis:

<ol>
	<li *ngFor="elem of data">
		{{ elem }}
	</li>
</ol>

Hankige kaubad oma teenusest komponendi ja väljastage need komponendi mallis.

Tehke oma teenusesse meetod uue kauba lisamiseks. Komponends tehke nupp, mille klõpsamisel lisatakse uus kaup.

Tehke vorm kahe sisendväljaga ja nupuga, mille vajutamisel lisatakse uus kaup.