Использование сервиса в 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>
Получите товары из вашего сервиса в компоненте и выведите их в темплейте компонента.
Сделайте в вашем сервисе метод для добавления нового товара. В компоненте сделайте кнопку, по клику на которую будет добавляться новый товар.
Сделайте форму с двумя инпутами и кнопкой, по нажатию на которую будет добавляться новый товар.