Saltar al contenido

Inyección de dependencia angular

Inyección de dependencia angular

La inyección de dependencias en Angular le permite inyectar dependencias en el componente o la clase. En esta guía, aprenderemos qué es la inyección de dependencia en Angular y cómo inyectar una dependencia en un componente o clase. Esta guía es parte de Angular: The Definitive Guide

¿Qué es una dependencia en Angular?

Creé un ProductService en la guía dedicada a los servicios Angular. AppComponent depende de ProductService para proporcionar la lista de productos para mostrar. En resumen, AppComponent tiene una dependencia, esa dependencia es ProductService.

¿Qué es una inyección de dependencia angular?

Echemos un vistazo al ProductService, que creé en la guía de servicios en Angular. El servicio devuelve productos cuando se llama al método getProduct.

import {Prodotto} from './Prodotto'
  
export class ProdottoService{
  
    public  getProdotti() {
  
        let prodotti:Prodotto[];
  
        prodotti=[
            new Prodotto(1,'Matita',1€),
            new Prodotto(2,'Gomma',1€),
            new Prodotto(3,'Penna',1€),
        ]
  
        return prodotti;               
    }
}

Creé una instancia del servicio directamente en el componente como se muestra a continuación.

import { Component } from '@angular/core';
  
import { ProdottoService } from './prodotto.service';
import { Prodotto } from './prodotto.model';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
  
export class AppComponent
{
  
   prodotti:Prodotto[];
   prodottoService;
  
   constructor(){
     this.prodottoService=new ProdottoService();
   }
  
   getProdotti() {
      
     this.prodotti=this.prodottoService.getProdotti();
   }
   
}

La instancia de servicio es local para el componente.