Използване на услуга в 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>

Получете стоки от вашата услуга в компонента и ги изведете в темплейта на компонента.

Направете във вашата услуга метод за добавяне на нова стока. В компонента направете бутон, при клик върху който ще се добавя нова стока.

Направете форма с два инпута и бутон, при натискане на който ще се добавя нова стока.