Mentre la maggior parte di voi molto probabilmente familiarità con il modo di base per configurare un provider semplicemente dichiarandoli:

providers: 

Angular dependency injection fornisce funzionalità più avanzate.

Con il provider di fabbrica è possibile configurareInjector per restituire un valore richiamando una funzione specifica. Diamo un’occhiata a questo esempio.

La proprietà provide configura il token che verrà utilizzato in dependency injection e useFactory punta alla funzione che verrà utilizzata per restituire il valore desiderato. La proprietà deps configura i token che verranno passati alla funzione factory.

Quando usarlo?

Il fornitore di fabbrica può essere molto utile quando è necessario creare dinamicamente un valore dipendente, in base alle informazioni che non si avranno fino al tempo di esecuzione. È possibile prendere una decisione informata su quale valore restituire in base ad altri servizi e allo stato dell’applicazione.

Esempio:

Proviamo a indovinare da quale dispositivo mobile un utente ha effettuato l’accesso. Cercheremo di utilizzare informazioni come l’agente utente del browser, la larghezza dello schermo e l’altezza dello schermo. Definiamo tre token che verranno utilizzati in seguito per identificare il nome del dispositivo.

La classeInjectionToken — Crea un token che può essere utilizzato in Angular dependency injection. InjectionToken è parametrizzato su T che è il tipo di oggetto che verrà restituito dal Injector. Ciò fornisce un ulteriore livello di sicurezza del tipo.

providers: providers: providers: 

Ora possiamo trovare un algoritmo per rilevare il nome del dispositivo in base ai tre token che abbiamo definito sopra. Passiamo una funzione freccia a useFactory che ha 3 dipendenze, per risolvere tali dipendenze, passiamo in un dep (dep) dep (dep) con i token elencati.

providers: 

Infine, consumeremo il nome del dispositivo nel nostro componente angolare.

@Component({ selector: 'my-device-name')
export class DeviceName {
constructor(@Inject('DeviceName') private deviceName: string) {}}

Il decoratore del parametro Inject indica ad Angular DI che questo parametro (deviceName) deve essere risolto da un token — DeviceName definito.

Questo è tutto!

Seguimi su Twitter #Lanotecno

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.