Angular 2 - Dependency Injection

L'inserimento delle dipendenze è la capacità di aggiungere la funzionalità dei componenti in fase di esecuzione. Diamo un'occhiata a un esempio e ai passaggi utilizzati per implementare l'inserimento delle dipendenze.

Step 1- Creare una classe separata che abbia il decoratore iniettabile. Il decoratore iniettabile consente di iniettare e utilizzare le funzionalità di questa classe in qualsiasi modulo JS angolare.

@Injectable() 
   export class classname {  
}

Step 2 - Successivamente, nel modulo appComponent o nel modulo in cui desideri utilizzare il servizio, devi definirlo come provider nel decoratore @Component.

@Component ({  
   providers : [classname] 
})

Diamo un'occhiata a un esempio su come ottenere ciò.

Step 1 - Crea un file ts file per il servizio denominato app.service.ts.

Step 2 - Inserisci il seguente codice nel file creato sopra.

import { 
   Injectable 
} from '@angular/core'; 

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

I seguenti punti devono essere annotati riguardo al programma di cui sopra.

• Il decoratore iniettabile viene importato dal modulo angolare / centrale.

• Stiamo creando una classe chiamata appService decorata con il decoratore iniettabile.

• Stiamo creando una semplice funzione chiamata getApp che restituisce una semplice stringa chiamata "Hello world".

Step 3 - Nel file app.component.ts inserire il codice seguente.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

I seguenti punti devono essere annotati riguardo al programma di cui sopra.

• Innanzitutto, stiamo importando il nostro modulo appService nel modulo appComponent.

• Quindi, stiamo registrando il servizio come fornitore in questo modulo.

• Nel costruttore definiamo una variabile chiamata _appService del tipo appService in modo che possa essere chiamata ovunque nel modulo appComponent.

• Ad esempio, nel lifecyclehook ngOnInit, abbiamo chiamato la funzione getApp del servizio e assegnato l'output alla proprietà value della classe AppComponent.

Salva tutte le modifiche al codice e aggiorna il browser, otterrai il seguente output.