Inyección de Componentes y Directivas en Angular

Foto de Noah Rosenfield en Unsplash

Inyección de Dependencias (Dependency Injection o DI) es un patrón de diseño en el que una clase requiere instancias de una o más clases y en vez de generarlas dentro de su propio constructor, las recibe ya instanciadas por un mecanismo externo.

En Angular esto significa que podemos requerir servicios u objetos que alguna de nuestras clases necesita, ya sean componentes, directivas o servicios, sin la necesidad de instanciar dichas dependencias nosotros mismos.

En vez de:

import { Service } from './service';
import { Something } from './somewhere'; 
@Component({ ... })
class MyComponent {
  private service: Service;
  constructor() {
    this.service = new Service(this, new Something());
  }
  doSomething() {
    this.service.whatever();
  }
}

Angular se encarga de realizar este proceso tras bambalinas:

import { Service } from './service';
@Component({ ... })
class MyComponent {
  constructor(private service: Service) {}
  doSomething() {
    this.service.whatever();
  }
}

Lo importante (y que puede pasar inadvertido a primera vista) es que nuestras dependencias pueden tener sus propias dependencias y así en…