Использование сервиса в 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>

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

Сделайте в вашем сервисе метод для добавления нового товара. В компоненте сделайте кнопку, по клику на которую будет добавляться новый товар.

Сделайте форму с двумя инпутами и кнопкой, по нажатию на которую будет добавляться новый товар.