Las dependencias son servicios u objetos que una clase necesita para realizar su función. La inyección de dependencia, o DI, es un patrón de diseño en el que una clase solicita dependencias de fuentes externas en lugar de crearlas.

El marco DI de Angular proporciona dependencias a una clase en la instanciación. Puede utilizar Angular DI para aumentar la flexibilidad y modularidad en sus aplicaciones.

Vea el ejemplo en vivo para ver un ejemplo funcional que contiene los fragmentos de código en esta guía.

Creando un servicio inyectable

Para generar un nuevo HeroService clase en el src/app/heroes carpeta use el siguiente comando Angular CLI.

ng generate service heroes/hero

Este comando crea el siguiente valor predeterminado HeroService.

import Injectable from'@angular/core';@Injectable(
  providedIn:'root',)exportclassHeroServiceconstructor()

los @Injectable() decorator especifica que Angular puede usar esta clase en el sistema DI. Los metadatos providedIn: 'root', significa que el HeroService es visible en toda la aplicación.

A continuación, para obtener los datos simulados de héroe, agregue un getHeroes() método que devuelve los héroes de mock.heroes.ts.

import Injectable from'@angular/core';importHEROESfrom'./mock-heroes';@Injectable(// declares that this service should be created// by the root application injector.
  providedIn:'root',)exportclassHeroServicegetHeroes()returnHEROES;

Para mayor claridad y facilidad de mantenimiento, se recomienda que defina los componentes y servicios en archivos separados.

Si combina un componente y un servicio en el mismo archivo, es importante definir primero el servicio y luego el componente. Si define el componente antes del servicio, Angular devuelve un tiempo de ejecución null error de referencia.

Servicios de inyección

La inyección de servicios hace que sean visibles para un componente.

Para inyectar una dependencia en un componente constructor(), proporcione un argumento de constructor con el tipo de dependencia. El siguiente ejemplo especifica el HeroService en el HeroListComponent constructor. El tipo de heroService es HeroService.

constructor(heroService: HeroService)

Para obtener más información, consulte Proporcionar dependencias en módulos e inyectores jerárquicos.

Usar servicios en otros servicios

Cuando un servicio depende de otro servicio, siga el mismo patrón que inyectar en un componente. En el siguiente ejemplo HeroService depende de un Logger servicio para informar de sus actividades.

Primero, importe el Logger Servicio. A continuación, inyecte el Logger servicio en el HeroServiceconstructor() especificando private logger: Logger entre paréntesis.

Cuando creas una clase cuyo constructor() tiene parámetros, especifique el tipo y metadatos sobre esos parámetros para que Angular pueda inyectar el servicio correcto.

Aquí el constructor() especifica un tipo de Logger y almacena la instancia de Logger en un campo privado llamado logger.

Las siguientes pestañas de código presentan la Logger servicio y dos versiones de HeroService. La primera versión de HeroService no depende de la Logger Servicio. La segunda versión revisada depende de Logger Servicio.

import Injectable from'@angular/core';importHEROESfrom'./mock-heroes';import Logger from'../logger.service';@Injectable(
  providedIn:'root',)exportclassHeroServiceconstructor(private logger: Logger)getHeroes()this.logger.log('Getting heroes ...');returnHEROES;
import Injectable from'@angular/core';importHEROESfrom'./mock-heroes';@Injectable(
  providedIn:'root',)exportclassHeroServicegetHeroes()returnHEROES;
import Injectable from'@angular/core';@Injectable(
  providedIn:'root')exportclassLogger
  logs:string[]=[];// capture logs for testinglog(message:string)this.logs.push(message);console.log(message);

In this example, the getHeroes() El método utiliza el Logger service registrando un mensaje al buscar héroes.

Que sigue

  • Proveedores de dependencia
  • Proveedores y tokens DI
  • Inyección de dependencia en acción