От автора: службы применяются, когда нам нужно использовать общий функционал для разных модулей. Например, у нас может быть функционал базы данных, который используется различными модулями. И, следовательно, вы можете создать службу, которая будет содержать функционал базы данных. Разберем на примере работу Angular services.
При создании службы необходимо выполнить следующие действия.
Шаг 1 — Создайте отдельный класс, который содержит включаемый декоратор. Включаемый декоратор позволяет вводить и использовать функционал этого класса в любом модуле Angular JS.
|
1 2 3 |
@Injectable() export class classname { } |
Шаг 2 — Далее в модуле appComponent или модуле, в котором вы хотите использовать службу, вам необходимо определить его в качестве провайдера в декораторе @Component.
|
1 2 3 |
@Component ({ providers : [classname] }) |
Давайте рассмотрим пример того, как это делается.
Шаг 1. Создайте файл ts для службы с именем app.service.ts.
Шаг 2 — Поместите следующий код в созданный выше файл.
|
1 2 3 4 5 6 7 8 9 10 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Component } from '@angular/core'; import { appService } from './app.service'; @Component ({ selector: 'demo-app', template: '<div>{{value}}</div>', 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.
После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
