INYECCIÓN DE DEPENDENCIAS

Es un patrón de diseño orientado a objetos que permite el manejo de objetos entre componentes y que crea las instancias de la clase o clases automáticamente desde un servicio externo mediante el decorador @Injectable().

SERVICIOS

Los servicios son clases destinadas a la reutilización de código y mantener los datos de forma organizada (los datos no se encuentran en el mismo componente).

Creación de un servicio Angular

ng generate service shared/services/datos --module app

Este servicio permite alojar los datos y mediante el decorador @Injectable permite crear instancias automáticas del objeto en el componente. En el ejemplo siguiente se crea un atributo con el modificador de acceso private y la propiedad readonly que es muy similar a una constante. Al atributo DATOS se le asigna un objeto de tipo User y el método getUser devuelve el resultado. Es necesario tanto en el atributo como en el método getUser especificar el tipo de objeto.

Ejemplo de un servicio implementando inyección de dependencias:

import { Injectable } from '@angular/core';
import { User } from "../model/user";
@Injectable({
  providedIn: 'root'
})
export class DatosService {
  private readonly DATOS: User = {
    nombre: "Mónica",
    apellidos: "Cañero",
    pais: "España",
    ciudad: "Málaga"  
    };
  constructor() { }
  getUser(): User {
    return this.DATOS;
  }
}

Interface para los tipos de dato.

export interface User{
    nombre: string;
    apellidos: string;
    pais: string;
    ciudad: string;
}

Solo declarando los parámetros (modificador de acceso, atributo, objeto) el componente crea la instancia automáticamente. En el ejemplo se crea un atributo tipo User y en el método de inicialización se llama al método getUser del servicio creado anteriormente.

import { Component, OnInit } from '@angular/core';
import { User } from "../shared/model/apod";
import { DatosService } from "../shared/services/datos.service";
@Component({
  selector: 'ed-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  user: User;
  constructor(private datos: DatosService) { }
  ngOnInit() {
    this.user = this.datos.getUser();
  }
}

De esta forma Angular permite alojar los datos y/o métodos para manejar esos datos desde un servicio externo.

Nota: Desde angular 6 no es necesario importar los módulos al componente principal ya que Angular lo hace automáticamente al crear un servicio desde Angular CLI, añadiéndo providedIn: 'root' al decorador @Injectable.