Co to są dostawcy w Angular2?

Question

W konfiguracji komponentu Angular2 providers jest jednym z kluczy, które możemy określić. W jaki sposób definiuje się tych dostawców i do czego są oni wykorzystywani?

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

Uwaga:

dokumentacja Angular2 stopniowo dojrzewa, ale nadal nieliczne. Obecnie definiuje dostawców jak:

Tablica uzależnienia od dostawców usług wtryskowych, że komponent wymaga.

Ta rekurencyjna definicja nie jest zbyt pomocna. Bardziej szczegółowe wyjaśnienie na przykładzie mogłoby naprawdę pomóc.

Answer 1

dostawcy zazwyczaj pojedyncza (w jednym przypadku) obiektów, że inne przedmioty mają dostęp do zastrzyku zależności (DI).

Jeśli zamierzasz używać obiektu wielokrotnie, na przykład usługi Http w różnych komponentach, możesz poprosić o to samo wystąpienie tej usługi (użyj jej ponownie). Robisz to za pomocą DI przez podając odniesienie do tego samego obiektu, który DI tworzy dla ciebie.

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

..instead tworzenia nowego obiektu za każdym razem:

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

Jest to przybliżenie, ale to ogólna idea Dependency Injection - pozwolić na tworzenie i utrzymanie obiektów wielokrotnego użytku uchwyt ramy ...Dostawca jest terminem Angular dla tych obiektów wielokrotnego użytku (zależności).

Answer 2

Rejestracja zastrzyki

Dostawcy aby zastrzyki znane kątowym za DI oraz określenie zakresu iniekcyjnego (usług).

Hierarchia wtryskiwacze

kątowej za DI tworzy drzewo wtryskiwaczy (rodzic> dziecko> wnuczek> ...), który przypomina strukturę komponentów i dyrektyw.

jednej instancji za dostawcę

Pośrednicy są utrzymywane za wtryskiwacza. Każdy dostawca zapewnia pojedyncze wystąpienie iniekcji.

odnośnika Provider

Kiedy składnik lub dyrektywa ma zależność (parametr konstruktora), DI zaczyna patrząc na wtryskiwacza tego komponentu dla dostawców. Jeśli ma taki, żąda instancji od tego dostawcy i wstrzykuje go.

Jeśli iniektor nie ma dostawcy dla żądanego klucza (typu), wówczas wtryskiwacz macierzysty jest odwiedzany, aż do root (bootstrap), dopóki nie zostanie znaleziony dostawca i jego instancja może zostać wstrzyknięta. (Jeśli nie znaleziono dostawcy, DI zgłasza błąd).

Zdefiniuj zakres wstrzykiwania przykład

W ten sposób można określić zakres wspólnej służby, ponieważ DI zaczyna patrząc z komponentu gdzie instancją jest wymaganym do góry, aż znajdzie.

Singleton lub nie

Ile miejsc podać wstrzykiwania określa, jak wiele przypadków, zostanie utworzony (są one tworzone wystąpienia tylko wtedy, gdy faktycznie wymagane).

Jeśli chcesz jedno wystąpienie dla całej aplikacji, a następnie dostarczyć do wstrzykiwania tylko raz w składniku głównym (lub z bootstrap(AppComponent, [...]) co skutkuje tym samym zachowanie.

Jeśli chcesz nowe wystąpienie dla każdego komponentu A, dodaj go do dostawców komponentu A.

(zmiana) NgModule lazy i nie-lazy

Dzięki wprowadzeniu NgModule moduły dodatkowe poziomy zostały wprowadzone. Dostawcy zarejestrowani w modułach nieobciążonych ładowaniem znajdują się powyżej głównego komponentu w hierarchii.

Sztuczna załadowane moduły są powyżej elementów i wytycznymi załadowanych przez te komponenty.

Ponieważ operatorzy są tylko do odczytu po utworzeniu wtryskiwacz, nie ma sposobu, aby dodać dostawców z leniwych modułów załadowanych do wtryskiwacza głównego. Dlatego też moduły z opóźnionym ładowaniem mają swój własny zakres główny.

Zobacz także https://stackoverflow.com/a/45231440/217408

Answer 3

Pomyśl o dostawców jak przepis, który mówi kanciasty jak wstrzykiwać usługę.

Często deklarują dostawców w kątową w ten sposób:

providers: [AnyService] 

to tylko krótki ręka na to:

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

Oba podejścia są mówiąc: Gdy ktoś wymaga „AnyService”, dostarczają klasa „AnyService”

Zobacz, że choć jestem zapewniając tę ​​samą klasę w powyższym przykładzie, w innym scenariuszu mógłby zrobić coś takiego.

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

Ale w obu scenariuszach, konstruktor pozostałaby taka sama:

constructor(private _anyService: AnyService) { 
} 

lepiej go zrozumieć trzeba zrozumieć zależność wtrysku pracuje w Kątowymi 2 jako dostawcy są bezpośrednio z nim związane.

Jest to lektura obowiązkowa dla każdego kątowego 2 dewelopera.

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