La Dependency Injection in Angular consente di iniettare dipendenze nel componente o nella classe. In questa guida impareremo cos’è la Dependency Injection in Angular e come iniettare una dipendenza in un Componente o in una classe.
Questa guida fa parte di Angular: la guida definitiva
Cos’è una dipendenza in Angular
Ho creato un ProductService nella guida dedicata ai servizi in Angular. AppComponent dipende dal ProductService per fornire l’elenco dei prodotti da visualizzare. In breve, AppComponent ha una dipendenza, questa dipendenza è appunto ProductService.
Cos’è una Dependency Injection in Angular
Diamo un’occhiata al ProductService, che ho creato nella guida ai servizi in Angular.
Il servizio restituisce i prodotti quando viene invocato il metodo 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; } }
Ho creato un’istanza del servizio direttamente nel componente come mostrato di seguito.
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(); } }
L’istanza del servizio è locale al componente.