Angulaire 2 - Injection de dépendance

L'injection de dépendances est la possibilité d'ajouter la fonctionnalité des composants au moment de l'exécution. Jetons un coup d'œil à un exemple et aux étapes utilisées pour implémenter l'injection de dépendances.

Step 1- Créez une classe distincte qui a le décorateur injectable. Le décorateur injectable permet à la fonctionnalité de cette classe d'être injectée et utilisée dans n'importe quel module Angular JS.

@Injectable() 
   export class classname {  
}

Step 2 - Ensuite, dans votre module appComponent ou dans le module dans lequel vous souhaitez utiliser le service, vous devez le définir comme fournisseur dans le décorateur @Component.

@Component ({  
   providers : [classname] 
})

Regardons un exemple sur la façon d'y parvenir.

Step 1 - Créer un ts fichier pour le service appelé app.service.ts.

Step 2 - Placez le code suivant dans le fichier créé ci-dessus.

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

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

Les points suivants doivent être notés à propos du programme ci-dessus.

• Le décorateur injectable est importé du module angulaire / noyau.

• Nous créons une classe appelée appService qui est décorée avec le décorateur Injectable.

• Nous créons une fonction simple appelée getApp qui renvoie une chaîne simple appelée «Hello world».

Step 3 - Dans le fichier app.component.ts, placez le code suivant.

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(); 
   }   
}

Les points suivants doivent être notés à propos du programme ci-dessus.

• Tout d'abord, nous importons notre module appService dans le module appComponent.

• Ensuite, nous enregistrons le service en tant que fournisseur dans ce module.

• Dans le constructeur, nous définissons une variable appelée _appService de type appService afin qu'elle puisse être appelée n'importe où dans le module appComponent.

• Par exemple, dans le cycle de vie ngOnInit, nous avons appelé la fonction getApp du service et attribué la sortie à la propriété value de la classe AppComponent.

Enregistrez toutes les modifications de code et actualisez le navigateur, vous obtiendrez la sortie suivante.