Внедрение зависимостей в угловых

Внедрение зависимостей (DI) - важный шаблон проектирования приложений. Angular имеет собственную структуру DI, которая обычно используется при разработке приложений Angular для повышения их эффективности и модульности.

Зависимости - это сервисы или объекты, которые нужны классу для выполнения своих функций. DI - это шаблон кодирования, в котором класс запрашивает зависимости от внешних источников, а не создает их сам.

В Angular инфраструктура DI предоставляет объявленные зависимости классу при создании экземпляра этого класса. В этом руководстве объясняется, как DI работает в Angular, и как вы используете его, чтобы сделать ваши приложения гибкими, эффективными и надежными, а также тестируемыми и обслуживаемыми.

Пример рассмотрим компонент студентов ниже:

Код TypeScript:

import { Component } from '@angular/core';
@Component({
  selector: 'app-students',
  template: `
    <h2>Students</h2>
    <app-student-list></app-student-list>
  `
})
export class StudentsComponent { }

Демонстрация в реальном времени:

См. Pen DI_studentscomponent.js от w3resource ( @ w3resource ) на CodePen .

И компонент списка студентов, как описано ниже:

Код TypeScript:

import { Component }   from '@angular/core';
import { STUDENTS }      from './mock-students';
@Component({
  selector: 'app-student-list',
  template: `
    <div *ngFor="let student of students">
      {{student.id}} - {{student.name}}
    </div>
  `
})
export class StudentListComponent {
  students = STUDENTS;
}

Демонстрация в реальном времени:

См. Pen DI_student-list.component.ts от w3resource ( @ w3resource ) на CodePen .

StudentsComponent является компонентом студента высшего уровня. Его единственной целью является отображение StudentListComponent, который отображает список имен студентов.

Эта версия StudentListComponent получает студентов из массива STUDENTS, коллекции в памяти, определенной в отдельном файле mock-Students.

студент-list.component.ts

export class StudentListComponent {
  students = STUDENTS;
}

Этот подход работает для прототипирования, но не является надежным или обслуживаемым. Как только вы попытаетесь протестировать этот компонент или получить студентов с удаленного сервера, вам придется изменить реализацию StudentsListComponent и заменить каждое использование фиктивных данных STUDENTS.

Создать и зарегистрировать инъекционный сервис

Инфраструктура DI позволяет предоставлять данные компоненту из класса обслуживания, который можно добавить в отдельный файл. Для демонстрации мы создадим класс обслуживания для инъекций, который предоставляет список учащихся, и зарегистрируем этот класс в качестве поставщика этой услуги.

Наличие нескольких классов в одном файле может сбить с толку. Обычно рекомендуется определять компоненты и службы в отдельных файлах.

Создать инъекционный класс обслуживания

С помощью этой команды Angular CLI может создать новый класс StudentService в папке src / app / Students.

ng generate service students/student

Команда создает следующий скелет StudentService.

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class StudentService {
  constructor() { }
}

@Injectable () является важным компонентом в каждом определении сервиса Angular. Остальная часть класса была написана для предоставления метода getStudents, который возвращает те же фиктивные данные, что и раньше. (Реальное приложение, вероятно, получит свои данные асинхронно с удаленного сервера, но мы проигнорируем это, чтобы сосредоточиться на механике внедрения службы.)

Настройте инжектор с поставщиком услуг

Вы можете настроить инжекторы с поставщиками на разных уровнях вашего приложения, установив значение метаданных в одном из трех мест:

• В декораторе @Injectable () для самого сервиса.
• В декораторе @NgModule () для модуля NgModule.
• В декораторе @Component () для компонента.

Декоратор @Injectable () имеет опцию метаданных обеспеченных в, где вы можете указать поставщика декорированного класса обслуживания с корневым инжектором или с инжектором для конкретного NgModule.

Декораторы @NgModule () и @Component () имеют опцию метаданных провайдеров, где вы можете настроить провайдеров для инжекторов уровня NgModule или уровня компонента.

Инъекционные услуги

Чтобы StudentListComponent мог получать студентов из StudentService, он должен запросить внедрение StudentService, а не создавать собственный экземпляр StudentService с новым.

Вы можете указать Angular вводить зависимость в конструкторе компонента, указав параметр конструктора с типом зависимости. Вот конструктор StudentListComponent, который запрашивает внедрение StudentService.

constructor(StudentService: StudentService)

Конечно, StudentListComponent должен что-то делать с внедренным StudentService. Вот пересмотренный компонент, использующий внедренный сервис.

Код TypeScript:

import { Component }   from '@angular/core';
import { Hero }        from './student';
import { HeroService } from './student.service';
@Component({
  selector: 'app-student-list',
  template: `
    <div *ngFor="let student of studente">
      {{student.id}} - {{student.name}}
    </div>
  `
})
export class StudentListComponent {
  students: Student[];
  constructor(studentService: StudentService) {
    this.students = studentService.getStudent();
  }
}

Демонстрация в реальном времени:

См. Pen DI_studentListwithDI.ts от w3resource ( @ w3resource ) на CodePen .

Предыдущая: Часто задаваемые вопросы по NgModule
Далее: Поставщики зависимостей