Создание службы в Angular с помощью CLI/ручно


Создайте службу с помощью CLI

ng generate service <service-name>
Войдите в полноэкранный режим Выход из полноэкранного режима

Структура

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

@Injectable({
  providedIn: 'root',
})
export class <service-name> {

  constructor() { }

}
Вход в полноэкранный режим Выход из полноэкранного режима

Создание службы вручную

Чтобы создать новый сервис вручную:

  1. Перейдите в каталог вашего проекта Angular.
  2. Создайте новый файл <service-name>.service.ts.
  3. В верхней части файла добавьте следующий оператор импорта.
import { Injectable } from '@angular/core';
Вход в полноэкранный режим Выйти из полноэкранного режима
  1. Добавьте службу @Injectable()
@Injectable({
  providedIn: 'root',
})
Войти в полноэкранный режим Выйти из полноэкранного режима
  1. Добавьте оператор class, включающий код компонента с конструктором.
export class <service-name> {

  constructor() { }

}
Войти в полноэкранный режим Выйти из полноэкранного режима
  1. Используя сервис в компоненте, сначала нужно сделать Inject в конструкторе следующим образом:

    Добавить в конструктор параметр private ex : heroService типа HeroService.

// example
constructor(private heroService: HeroService) {}
Вход в полноэкранный режим Выход из полноэкранного режима
  Next Import :
Войти в полноэкранный режим Выход из полноэкранного режима
// example
import { HeroService } from '../hero.service';
Вход в полноэкранный режим Выход из полноэкранного режима
  1. Нужно добавить в <app.module.ts> вот так :
// example
@Component({
  /* . . . */
  providers: [HeroService]
})
Вход в полноэкранный режим Выход из полноэкранного режима

и импортировать в него.

// example
import { HeroService } from '../hero.service';
Вход в полноэкранный режим Выход из полноэкранного режима

Ссылка

Сервис Angular

Живой пример :

Stack Blitz

Оцените статью
devanswers.ru
Добавить комментарий