В нашем приложении мы добавили провайдер для 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 и тд. А также, использовать их во всем нашем приложении.
