Angular 2 services — Служби

22

Від автора: служби застосовуються, коли нам потрібно використовувати загальний функціонал для різних модулів. Наприклад, у нас може бути функціонал бази даних, який використовується різними модулями. І, отже, ви можете створити службу, яка буде містити функціонал бази даних. Розберемо на прикладі роботу Angular services.

Angular 2 services — Служби

При створенні служби необхідно виконати наступні дії.

Крок 1 — Створіть окремий клас, який містить включається декоратор. Включається декоратор дозволяє вводити і використовувати функціонал цього класу в будь-якому модулі Angular JS.

@Injectable()
export class classname {
}

Крок 2 — Далі у модулі appComponent або модулі, в якому ви хочете використовувати службу, вам необхідно визначити його в якості провайдера в декораторе @Component.

@Component ({
providers : [classname]
})

Давайте розглянемо приклад того, як це робиться.

Крок 1. Створіть файл ts для служби з ім’ям app.service.ts.

Angular 2 services — Служби

Крок 2 — Помістіть наступний код в створений вище файл.

import {
Injectable
} from ‘@angular/core’;
@Injectable()
export class appService {
getApp(): string {
return «Hello world»;
}
}

У вищевказаному коді необхідно зазначити наступне.

Декоратор Injectable імпортується з модуля angular/core.

Ми створюємо клас з ім’ям appService, який оформляється декоратором Injectable.

Ми створюємо просту функцію з ім’ям getApp, яка повертає рядок «Hello world».

Крок 3 — Помістіть наступний код у файл app.component.ts.

import {
Component
} from ‘@angular/core’;
import {
appService
} from ‘./app.service’;
@Component ({
selector: ‘demo-app’,
template: ‘

{{value}}

‘,
providers: [appService]
})
export class AppComponent {
value: string = «»;
constructor(private _appService: appService) { }
ngOnInit(): void {
this.value = this._appService.getApp();
}
}

У вищевказаному коді необхідно зазначити наступне.

По-перше, ми імпортуємо модуль appService в модуль appComponent.

Потім ми реєструємо службу, в якості провайдера в цьому модулі.

У конструкторі ми визначаємо змінну з ім’ям _appService типу appService, щоб її можна було викликати де завгодно в модулі appComponent.

Наприклад, у хука ngOnInit ми викликаємо функцію getApp служби і присвоюємо результат властивості value класу AppComponent.

Після збереження всіх змін в коді оновлення сторінки браузера ви отримаєте наступний результат.

Angular 2 services — Служби