меню

Внедрение зависимости следует принципу иерархии:

  • Если зависимость внедрена в AppModule, то экземпляр зависимости доступен всему приложению.
  • Если зависимость внедрена в AppComponent, то экземпляр будет доступен во всех компонентах, за исключением других сервисов.
  • Если зависимость внедрена в любом другом компоненте, то экземпляр зависимости будет доступен в дочерних компонентах.

Подключение сервисов в app.module.ts:

 
@NgModule({
  //...
  providers: [AccountsService, LoggingService],
  //...
})
  

Сервис, использующий другой сервис:

  
import { Injectable } from '@angular/core';
import { LoggingService } from './logging.service';

@Injectable()
export class AccountsService {
    //...
    constructor(private loggingService: LoggingService) {}

    addAccount(name: string, status: string) {
        //...
        this.loggingService.logStatusChange(status);
    }
}
 

Сервис AccountsService использует сервис loggingService, то есть имеет зависимость. По этому AccountsService должен иметь декоратор @Injectable(). Данный декоратор указывает, что класс сервиса может иметь зависимости.

Простейший сервис - это просто класс:

  
export class LoggingService {
    logStatusChange(status: string) {
        console.log('A server status changed, new status: ' + status);
    }
}
  

Использование сервиса в конпоненте

Импортировать класс сервиса.

Сервис должен быть указан в провайдере родительского объекта, иначе необходимо в декораторе класса указать ключ providers со значением - массив имен классов сервисов.

Для инициализации объекта сервиса можно использовать сокращение - constructor(private accountsService: AccountsService) {}

  
//...
import { AccountsService } from './accounts.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    accounts: {name: string, status: string}[] = [];
    constructor(private accountsService: AccountsService) {}
    ngOnInit() {
        this.accounts = this.accountsService.accounts;
    }
}
  

Подписка компонента на событие сервиса:

  
constructor(private accountsService: AccountsService) {
  this.accountsService.statusUpdated.subscribe(
    (status: string) => alert('New Status: ' + status)
  );
}
  

Класс AccountsService имеет свойство statusUpdated = new EventEmitter(). Объект EventEmitter имеет методы emit() и subscribe(). Сервис AccountsService отправляет события и подписывается на них. Таким образом на основе сервиса может быть построена коммуникация между компонентами.


Возможно, вам будет интересно

Route. Переключения и параметры

Работа с роутером и ссылками в Angular. Программное переключение роутера и параметры пути в Angular

Формы. Реактивный подход.

Работа с формами. Реактивный подход (Reactive).

События и жизненный цикл

Жизненный цикл приложения и события в Angular

Навигация. Передача данных событиями

Навигация в Angular на основе событий. Передача данных между вложенными компонентами с помощью событий в Angular

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту