Cosa sono i provider in Angular2?

Question

Nella configurazione del componente Angular2 providers è una delle chiavi che è possibile specificare. Come vengono definiti questi fornitori e a cosa servono?

@Component({ 
    .. 
    providers: [..], 
    .. 
}) 

Nota:

documentazione Angular2 sta gradualmente maturando, ma ancora scarsi. Si definisce attualmente fornitori come:

Un array di fornitori di iniezione di dipendenza per i servizi che il componente richiede.

Questa definizione ricorsiva non è molto utile. Una spiegazione più dettagliata con un esempio sarebbe di grande aiuto.

Answer 1

Fornitori sono solitamente singoletto (un esempio) oggetti, che altri oggetti hanno accesso tramite iniezione di dipendenza (DI).

Se si pianifica di utilizzare un oggetto più volte, ad esempio il servizio Http in diversi componenti, è possibile chiedere la stessa istanza di quel servizio (riutilizzarlo). Lo fai con l'aiuto di DI di fornendo un riferimento allo stesso oggetto che DI crea per te.

@Component){ 
    .. 
    providers: [Http] 
} 

..instead di creare nuovo oggetto ogni volta:

@Component){} 
class Cmp { 
    constructor() { 
    // this is pseudo code, doens't work 
    this.http = new Http(...options); 
    } 
} 

Questa è un'approssimazione, ma questo è l'idea generale dietro Dependency Injection - lasciare che la creazione e la manutenzione di oggetti riutilizzabili maniglia quadro ...Il fornitore è il termine di Angular per questi oggetti riutilizzabili (dipendenze).

Answer 2

iniettabili Registra

prestatori mettano iniettabili noti DI di angolare e definiscono l'ambito di un iniettabile (servizio).

Gerarchia di iniettori

DI di angolare crea un albero di iniettori (genitore> bambino> nipotino> ...) che ricorda la struttura dei componenti e delle direttive.

istanza singola per fornitore

Provider sono mantenute per iniettore. Ogni fornitore fornisce una singola istanza di un iniettabile.

ricerca Provider

Quando un componente o di direttiva ha una dipendenza (parametro del costruttore), DI inizia a cercare su iniettore di questa componente per i fornitori. Se ne ha uno, richiede l'istanza da questo provider e la inietta.

Se l'iniettore non dispone di un provider per la chiave richiesta (tipo), l'iniettore principale viene visitato fino alla radice (bootstrap) finché non viene trovato un provider e la sua istanza può essere iniettata. (Se non viene trovato nessun provider, DI genera un errore).

definire la portata di un'istanza iniettabile

In questo modo è possibile definire l'ambito di un servizio condiviso, perché DI inizia a cercare dal componente in cui viene richiesta un'istanza verso l'alto fino a trovarne uno.

Singleton o no

Quanti posti si fornisce un iniettabile determina come verranno creati molti casi (sono istanziati solo se effettivamente richiesto).

Se si desidera una singola istanza per tutta l'applicazione, quindi fornire un iniettabile solo volta alla componente principale (o con bootstrap(AppComponent, [...]) che provoca lo stesso comportamento.

Se si desidera una nuova istanza per ciascun componente A, quindi aggiungerla ai provider del componente A.

(update) NgModule pigro e non differita

Con l'introduzione di NgModule moduli, sono stati introdotti livelli aggiuntivi. I provider registrati con moduli non pigri sono sopra il componente root nella gerarchia.

I moduli con carico lento sono sopra i componenti e le direttive caricati da questi componenti.

Poiché i provider sono di sola lettura dopo la creazione di un iniettore, non è possibile aggiungere provider dall'appliance root ai moduli caricati in modo lento. Pertanto, i moduli lazy caricati ottengono il proprio ambito di root.

Vedi anche https://stackoverflow.com/a/45231440/217408

Answer 3

Pensate a fornitori come una ricetta che dice angolare come iniettare un servizio.

Spesso ci dichiariamo fornitori in angolare questo modo:

providers: [AnyService] 

Questo è solo un breve mano per questo:

[new Provider(AnyService, {useClass: AnyService})] 

Entrambi gli approcci hanno da dire: Ogni volta che qualcuno richiede "AnyService", fornire la class "AnyService"

Vedi anche se sto fornendo la stessa classe nell'esempio sopra, in un altro scenario potrei fare qualcosa di simile.

[new Provider(AnyService, {useClass: AnyServiceCustom})] 

Ma in entrambi gli scenari, costruttore rimarrebbe la stessa:

constructor(private _anyService: AnyService) { 
} 

per capire meglio è necessario capire come l'iniezione di dipendenza lavora in Angular 2 come fornitori sono direttamente correlati ad esso.

Questo è un must per ogni sviluppatore angolare 2.

https://angular.io/docs/ts/latest/guide/dependency-injection.html?The%20Provider%20class%20and%20provide%20function#!#injector-providers