Выкарыстанне сервісу ў 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>

Атрымайце тавары з вашага сервісу ў кампаненце і вывядзіце іх у тэмплейце кампанента.

Зрабіце ў вашым сервісе метад для дадавання новага тавару. У кампаненце зрабіце кнопку, па кліку на якую будзе дадавацца новы тавар.

Зрабіце форму з двума інпутамі і кнопкай, па націсканні на якую будзе дадавацца новы тавар.