Servisa izmantošana Angular

Iepriekšējā nodarbībā mēs izveidojām savu servisu DataService. Tagad importēsim to komponentā:

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

Decorator @Component property providers jānorāda mūsu serviss:

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

Tagad mēs izmantosim īpašu pieeju, ko sauc par atkarību ieviešanu (dependency injection). Tā būtība ir tāda, ka komponenta konstruktorā mēs varam nodot mūsu servisu kā parametru, un tas automātiski nonāks mūsu komponenta privātajā property. Skatieties kodā:

export class AppComponent {
	constructor(private dataService: DataService) { // ieviešam atkarību
		console.log(this.dataService); // serviss privātajā property
	}
}

Atkarību ieviešana mūsu servisam darbojas, jo mēs iepriekš tam bijam piemērojuši decorator Injectable.

Tagad komponenta klases konstruktorā iegūstam datus no mūsu servisa, izsaucot atbilstošo metodi:

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

Iegūtos datus izvadīsim komponenta templatā:

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

Iegūstiet preces no jūsu servisa komponentā un izvadiet tās komponenta templatā.

Izveidojiet jūsu servisā metodi jaunas preces pievienošanai. Komponentā izveidojiet pogu, uz kuras klikšķinot tiks pievienota jauna prece.

Izveidojiet formu ar diviem ievades laukiem un pogu, uz kuras nospiežot tiks pievienota jauna prece.