Создание инжектируемой службы¶

2.08.2022

Сервис — это широкая категория, охватывающая любые ценности, функции или возможности, необходимые приложению. Обычно сервис — это класс с узкой, четко определенной целью. Компонент — это один из типов классов, который может использовать DI.

Angular отличает компоненты от сервисов для повышения модульности и возможности повторного использования. Отделяя функции компонента, связанные с представлением, от других видов обработки, вы можете сделать свои классы компонентов компактными и эффективными.

В идеале задача компонента — обеспечить удобство работы пользователя и не более того. Компонент должен представлять свойства и методы для связывания данных, чтобы быть посредником между представлением (отображаемым шаблоном) и логикой приложения (которая часто включает в себя некоторое понятие модели).

Компонент может делегировать определенные задачи сервисам, например, получение данных с сервера, проверку пользовательского ввода или ведение журнала непосредственно в консоли. Определяя такие задачи обработки в классе инжектируемого сервиса, вы делаете эти задачи доступными для любого компонента. Вы также можете сделать свое приложение более адаптируемым, внедряя различных поставщиков одного и того же вида услуг в зависимости от обстоятельств.

Angular не навязывает эти принципы. Angular помогает вам следовать этим принципам, упрощая разделение логики приложения на сервисы и делая эти сервисы доступными для компонентов через DI.

Примеры сервисов¶

Вот пример класса сервиса, который ведет журнал в консоль браузера.

export class Logger {
    log(msg: any) {
        console.log(msg);
    }
    error(msg: any) {
        console.error(msg);
    }
    warn(msg: any) {
        console.warn(msg);
    }
}

Сервисы могут зависеть от других сервисов. Например, вот HeroService, который зависит от сервиса Logger, а также использует BackendService для получения героев.

Этот сервис, в свою очередь, может зависеть от сервиса HttpClient для асинхронного получения героев с сервера.

export class HeroService {
    private heroes: Hero[] = [];

    constructor(
        private backend: BackendService,
        private logger: Logger
    ) {}

    getHeroes() {
        this.backend.getAll(Hero).then((heroes: Hero[]) => {
            this.logger.log(
                `Fetched ${heroes.length} heroes.`
            );
            this.heroes.push(...heroes); // fill cache
        });
        return this.heroes;
    }
}

Создание инжектируемого сервиса¶

Angular CLI предоставляет команду для создания нового сервиса. В следующем примере вы добавляете новый сервис в ваше приложение, которое было создано ранее с помощью команды ng new.

Чтобы создать новый класс HeroService в папке src/app/heroes, выполните следующие шаги:

Выполните эту команду Angular CLI:
1
ng generate service heroes/hero
Эта команда создает следующую службу по умолчанию HeroService.
1 2 3 4 5 6
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class HeroService {}
Декоратор @Injectable() указывает, что Angular может использовать этот класс в системе DI. Метаданные providedIn: 'root' означают, что HeroService виден во всем приложении.

Добавьте метод getHeroes(), который возвращает героев из mock.heroes.ts для получения имитационных данных героев:

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';

@Injectable({
    // declares that this service should be created
    // by the root application injector.
    providedIn: 'root',
})
export class HeroService {
    getHeroes() {
        return HEROES;
    }
}

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

Инжектирование сервисов¶

Чтобы внедрить сервис в качестве зависимости в компонент, вы можете использовать функцию constructor() компонента и указать в аргументе конструктора тип зависимости. Следующий пример указывает HeroService в конструкторе HeroListComponent. Тип heroService — HeroService. Angular распознает HeroService как зависимость, поскольку этот класс был ранее аннотирован декоратором @Injectable.

constructor(heroService: HeroService)

Инжектирование сервисов в другие сервисы¶

Когда сервис зависит от другого сервиса, следуйте той же схеме, что и при инъекции в компонент. В следующем примере HeroService зависит от сервиса Logger, чтобы сообщать о своих действиях.

Сначала импортируйте службу Logger. Затем внедрите службу Logger в конструктор() службы HeroService, указав private logger: Logger.

Здесь constructor() указывает тип Logger и хранит экземпляр Logger в приватном поле logger.

В следующих вкладках кода представлены сервис Logger и две версии HeroService. Первая версия HeroService не зависит от сервиса Logger. Переработанная вторая версия зависит от службы Logger.

src/app/heroes/hero.service (v2)src/app/heroes/hero.service (v1)src/app/logger.service

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
import { Logger } from '../logger.service';

@Injectable({
    providedIn: 'root',
})
export class HeroService {
    constructor(private logger: Logger) {}

    getHeroes() {
        this.logger.log('Getting heroes ...');
        return HEROES;
    }
}

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';

@Injectable({
    providedIn: 'root',
})
export class HeroService {
    getHeroes() {
        return HEROES;
    }
}

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class Logger {
    logs: string[] = []; // capture logs for testing

    log(message: string) {
        this.logs.push(message);
        console.log(message);
    }
}

В этом примере метод getHeroes() использует службу Logger, записывая в журнал сообщение при получении героев.

Создание инжектируемой службы¶

Примеры сервисов¶

Создание инжектируемого сервиса¶

Инжектирование сервисов¶

Инжектирование сервисов в другие сервисы¶

Что дальше¶

Комментарии