Настройка провайдеров в Angular 2

TypeScript повсеместно используется при создании Angular 2 приложений. Мы прописываем include для внедрения зависимостей. Если мы хотим использовать сервисы без include в компонентах, мы должны изучить декоратор @Inject. Данный декоратор позволяет внедрять любое значение или объект, без необходимости создания сервиса.

В нашем приложении мы добавили провайдер для MailService, и в компоненте AppComponent внедрили приватный параметр mail c типом MailService.

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    SimpleFormComponent
  ],
  imports: [
    BrowserModule,
    FomrsModule,
    HttpModule
  ],
  providers: [MailService],
  bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
export class AppComponent {
  title = `Hello world`;
  constructor(private mail:MailService){ }
}

Тоже самое можно сделать через конфигурационный объект. То есть передать в провайдер объект с ключом provide плюс значение. Добавим значение 'mail', и еще один ключ useClass:MailService.

app.module.ts

providers: [{provide:'mail', useClass:MailService}]

Теперь в AppComponent, вместо внедрения зависимости по типу, мы можем использовать декоратор inject. Необходимо убедиться, чтобы данный декоратор был подключен.

app.component.ts

export class AppComponent {
  title = `Hello world`;
  constructor(@Inject('mail') private mail){ }
}

Сервис mail подключается через значение 'mail', которое мы указали в провайдере. Класс MailService будет подставлен автоматически. И теперь нам не нужно явно прописывать include для него в компоненте. Angular знает, что необходимо взять класс из провайдеров, создать его сущность и подставить в наш код. После сохранения изменений, все будет работать по-прежнему.

Настройка провайдеров, также может пригодиться для предоставления значений. Например, путь для API запросов. Добавим провайдер provide: 'api' и передадим useValue: 'http//localhost:3000/', или что угодно.

app.module.ts

providers: [
  {provide:'mail', useClass:MailService},
  {provide: 'api', useValue: 'http://localhost:3000/'}
  ],

Теперь мы можем использовать значение API там, где нам нужно. Добавим api в конструктор и выведем значение в шаблоне через синтаксис {{api}}. Сохраним файл.

app.component.ts

@Component({
  selector: 'app-root',
  template: `<div>
<app-simple-form></app-simple-form>
{{mail.message}}
<hr>
{{api}}
</div>`
})
export class AppComponent {
  title = `Hello world`;
  constructor(
    @Inject('mail') private mail,
    @Inject('api') private api,
    ){ }
}

Таким образом, мы можем конфигурировать провайдеры через useClass, useValue, useFactory и тд. А также, использовать их во всем нашем приложении.