Použití služby v Angular

V předchozí lekci jsme vytvořili vlastní službu DataService. Nyní ji importujme do komponenty:

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

V dekorátoru @Component ve vlastnosti providers je třeba uvést naši službu:

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

Nyní využijme speciální přístup, který se nazývá dependency injection (dependency injection). Jeho podstata spočívá v tom, že v konstruktoru komponenty můžeme předat naši službu parametrem a ta automaticky přejde do soukromé vlastnosti naší komponenty. Podívejte se v kódu:

export class AppComponent {
	constructor(private dataService: DataService) { // injectujeme závislost
		console.log(this.dataService); // služba v soukromé vlastnosti
	}
}

Dependency injection pro naši službu funguje, protože jsme na ni dříve aplikovali dekorátor Injectable.

Nyní v konstruktoru třídy komponenty získejme data z naší služby voláním příslušné metody:

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

Vypišme získaná data v templatu komponenty:

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

Získejte zboží z vaší služby v komponentě a vypište je v templatu komponenty.

Vytvořte ve vaší službě metodu pro přidání nového zboží. V komponentě vytvořte tlačítko, po jehož kliknutí bude přidáno nové zboží.

Vytvořte formulář se dvěma inputy a tlačítkem, po jehož stisknutí bude přidáno nové zboží.