Від автора: служби застосовуються, коли нам потрібно використовувати загальний функціонал для різних модулів. Наприклад, у нас може бути функціонал бази даних, який використовується різними модулями. І, отже, ви можете створити службу, яка буде містити функціонал бази даних. Розберемо на прикладі роботу Angular services.
При створенні служби необхідно виконати наступні дії.
Крок 1 — Створіть окремий клас, який містить включається декоратор. Включається декоратор дозволяє вводити і використовувати функціонал цього класу в будь-якому модулі Angular JS.
@Injectable()
export class classname {
}
Крок 2 — Далі у модулі appComponent або модулі, в якому ви хочете використовувати службу, вам необхідно визначити його в якості провайдера в декораторе @Component.
@Component ({
providers : [classname]
})
Давайте розглянемо приклад того, як це робиться.
Крок 1. Створіть файл ts для служби з ім’ям app.service.ts.
Крок 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: ‘
‘,
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.
Після збереження всіх змін в коді оновлення сторінки браузера ви отримаєте наступний результат.