Внедрение зависимостей в Angular 2

Из этого урока мы узнаем как создавать сервисы в Angular 2 для общего использования. А также, познакомимся с внедрением зависимостей - Dependency Injection.

Начнем. Используем Angular CLI для генерации нового сервиса. Сервис можно создать при помощи команды service или s. Также, необходимо указать имя сервиса через пробел. Назовем его mail. После выполнения команды, будет сгенерировано два файла. Наш mail.service и файл spec для тестов. В терминале будет предупреждение о том, что сервис сгенерирован, но не добавлен для использования в приложении.

Angular CLI

$ ng g s mail

Пойдем дальше и добавим его. Для этого необходимо в файле app.module.ts указать провайдер MailService и сделать импорт данного сервиса.

app.module.ts

import { MailService } from './mail.service'
@NgModule({
  declarations: [
    AppComponent,
    SimpleFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [MailService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Теперь MailService доступен для использования в приложении. Мы можем добавить его в конструктор  компонента AppComponent. Добавим параметр private mail:MailService и импорт самого сервиса. Необходимо проверить, чтобы импорт выполнялся из правильного файла.

app.component.ts

import { MailService } from './mail.service'
@Component({
  selector: 'app-root',
  template: `<div>
<app-simple-form></app-simple-form>
</div>`
})
export class AppComponent {
  title = `Hello World`;
  constructor(private mail:MailService){}
}

После этого, все данные из mail.service.ts доступны для приложения. Откроем наш сервис и добавим поле message с текстом 'Новое сообщение!'.

mail.service.ts

import { Injectable } from '@angular/core';
@Injectable()
export class MailService {
  message = `Новое сообщение!`;
  constructor() { }
}

Вернемся в компонент. Под нашей простой формой выведем сообщение из сервиса.

app.component.ts

@Component({
  selector: 'app-root',
  template: `<div>
<app-simple-form></app-simple-form>
{{mail.message}}
</div>`
})

Сохраним изменения. После обновления в браузере, мы увидим наше сообщение под формой. Таким образом мы можем обмениваться данными в нашем приложении.