SAZNAJTE KAKO FUNKCIONIRA UBRIZGAVANJE OVISNOSTI TVRTKE ANGULAR

Saznajte kako funkcionira ubrizgavanje ovisnosti tvrtke Angular

Izvorno objavio izdavač Neeraj Dana na https://blog.bitsrc.io

Prije nego počnemo - Prilikom izrade NG aplikacija, bolje je dijeliti svoje komponente u zbirci za višekratnu uporabu, tako da ih nećete morati prepisivati.

Nema teorije - Hajde da zakodiramo

Pretpostavimo da imamo komponentu pod nazivom komponenta aplikacije koja ima osnovnu i jednostavnu strukturu na sljedeći način:

Hello ${name}

I imamo klasu usluge pod nazivom 'GreetingService' s funkcijom 'sayHello' koja prima 'name' kao parametar i vraća je (name) s dodatnim Hello, nastavljajući je.

Hello ${name}

Postoje dva načina korištenja klase usluge u komponenti: prvo, možemo ručno stvoriti instancu usluge u komponenti (to je pogrešan način i nikad se ne preporučuje).

e-hentai aplikacija

Drugi način je dopustiti Kutni stvorite instancu naše usluge i interno proslijedite tu instancu našoj komponenti. To je standardni i preporučeni način.

Ubrizgavanje naše usluge u sustav ubrizgavanja ovisnosti o kutu

Ako pokrenete ovaj projekt, dobit ćete pogrešku Nema davatelja usluge GreetingService!

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'my-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent implements OnInit { ngOnInit(): void { }  
 }

Kutni se žali da nije pronašao davatelja usluge za stvaranje instance pozdravne usluge ili ne zna kako izraditi instancu. Da bi okvir znao kako će instanca biti stvorena, moramo proslijediti objekt davatelja u svojstvo davatelja u dekoratoru komponente prikazanom ispod:

U ovom objektu pružatelja usluga imamo mnogo mogućnosti. Shvatimo ih jedan po jedan.

export class GreetingService{  
 sayHello(name){  
 return |_+_| ;  
 }  
 }

Tvornica po mjeri

Koristi tvornicu: ovo će reći okviru koja će se tvornica koristiti pri stvaranju objekta usluge. U našem slučaju nemamo tvornicu. Kreirajmo jedan.

Tvornica će biti funkcija koja će biti odgovorna za stvaranje i vraćanje objekta usluge.

Import {Component} from ‘@angular/core’;  
 Import {GreetingService} from ‘. /greetingService’;  
 @Component({  
 selector: ‘my-app’,  
 templateUrl: ‘./app.component.html’,  
 styleUrls: [ ‘./app.component.css’ ]  
 })  
 export class AppComponent {  
 constructor(private greetingService : GreetingService){  
 console.log(this.greetingService.sayHello());  
 }}

Prilagođeni žeton za ubrizgavanje

Sljedeća stvar je stvaranje svojstva čija će vrijednost biti instanca tokena ubrizgavanja. Tijekom korištenja ovog svojstva, okvir će jedinstveno identificirati našu uslugu i ubacit će pravu instancu usluge.

import { Component } from ‘@angular/core’;  
 import {GreetingService} from ‘./greetingService’;  
 @Component({  
 selector: ‘my-app’,  
 templateUrl: ‘./app.component.html’,  
 styleUrls: [ ‘./app.component.css’ ],  
 providers:[{ }]  
 })  
 export class AppComponent {  
 constructor(private greetingService : GreetingService){  
 console.log(this.greetingService.sayHello());  
 }
 }

U gornjem isječku stvaramo instancu klase InjectionToken i ona je generička. U našem slučaju, instanca GreetingService će se ubrizgati kada netko zatraži injekciju s imenom pozdravToken.

Za sada naš kôd izgleda ovako:

export function greetingFactory(){  
 return new GreetingService()  
 };  
 Or more short way  
 export const greetingFactory= () => new GreetingService ();

Ali tada dobivamo i istu pogrešku:

Kao i u konstruktoru, gdje tražimo instancu naše usluge, moramo mu reći jedinstveni niz našeg tokena za ubrizgavanje koji je pozdravniToken.

Ažurirajmo naš kôd:

var greetingTokken = new InjectionToken(GREET_TOKEN);

i sada ćemo imati rezultat koji nam omogućuje uspješan prolazak usluge iz Angular injekcije ovisnosti

Pretpostavimo sada da imate neke ugniježđene ovisnosti poput ove:

import { Component ,InjectionToken} from ‘@angular/core’;  
 import {GreetingService} from ‘./greetingService’;  
 export const greetingTokken = new InjectionToken(GREET_TOKEN);  
 export const greetingFactory=()=> new GreetingService();  
 @Component({  
 selector: ‘my-app’,  
 templateUrl: ‘./app.component.html’,  
 styleUrls: [ ‘./app.component.css’ ],  
 providers:[{  
 provide : greetingTokken,  
 useFactory : greetingFactory, }]  
 })  
 export class AppComponent {  
 constructor(private greetingService : GreetingService){  
 console.log(this.greetingService.sayHello());  
 }  
 name = ‘Angular’;  
 }

U ovom slučaju moramo dati još jedno svojstvo objektu davatelja usluga (to je deps), što je niz svih ovisnosti:

net core dependency injection višestruke implementacije

export class AppComponent {  
 constructor(@Inject(greetingTokken) private greetingService : GreetingService){  
 console.log(this.greetingService.sayHello(‘Neeraj’));  
 }  
 name = ‘Angular’;  
 }

Do sada smo sve radili samo u svrhe učenja. Ne preporučuje se stvaranje davatelja usluga ručno, osim ako postoji potreba.

Kutni radi sav težak posao umjesto vas. Možete smanjiti količinu koda i umjesto da ručno proslijedite tvornicu i token, jednostavno pitajte okvir da to učinim umjesto vas. Svojstvo 'provide', koje je token za ubrizgavanje, bit će naziv usluge koju želimo ubrizgati, a Angular će interno za nas stvoriti token za ubrizgavanje i tvornicu.

Sada umjesto da prođete tvornicu i žeton za injekciju ručno,

proslijedit ćemo drugo svojstvo (use-class) koje govori okviru koje klase moramo koristiti ili ubrizgati za vrijeme izvođenja:

import{DomSanitizer} from ‘@angular/platform-browser’;  
 export class GreetingService{  
 constructor (private domSanitizer:DomSanitizer){ }  
 sayHello(name){  
 return |_+_|  
 }  
 }

Sada naš kôd izgleda mnogo čišće i možemo ga dodatno smanjiti jednostavnim prenošenjem naziva usluge. Kutni će za nas izraditi objekt pružanja, tvornicu i žeton za ubrizgavanje te će nam instancu učiniti dostupnom po potrebi.

@Component({  
 selector: ‘my-app’,  
 templateUrl: ‘./app.component.html’,  
 styleUrls: [ ‘./app.component.css’ ],  
 providers:[{  
 provide : greetingTokken,  
 useFactory : greetingFactory,  
 deps:[DomSanitizer] }]  
 })  
 export class AppComponent {  
 constructor(@Inject(greetingTokken) private greetingService : GreetingService ){  
 console.log(this.greetingService.sayHello(‘Neeraj’));  
 }  
 name = ‘Angular’;  
 }

Na kraju, naš kôd izgleda vrlo poznato. Sada u budućnosti, kad god stvorite uslugu, znate koji su koraci uključeni u dobivanje te instance.

Hvala na čitanju ❤

Ako vam se svidio ovaj post, podijelite ga sa svojim prijateljima iz programiranja!

Pratite nas na Facebook | Cvrkut