Während die meisten von Ihnen wahrscheinlich mit der grundlegenden Art und Weise vertraut sind, einen Provider zu konfigurieren, indem Sie ihn einfach deklarieren:

providers: 

Angular Dependency Injection bietet erweiterte Funktionen.

Mit Factory provider können Sie Injector so konfigurieren, dass ein Wert durch Aufrufen einer bestimmten Funktion zurückgegeben wird. Schauen wir uns dieses Beispiel an.

providers: };

Die Eigenschaft provide konfiguriert das Token, das bei der Abhängigkeitsinjektion verwendet wird, und die useFactory zeigt auf die Funktion, mit der der gewünschte Wert zurückgegeben wird. Die Eigenschaft deps konfiguriert die Token, die an Ihre Factory-Funktion übergeben werden.

Wann ist es zu benutzen?

Factory Provider kann sehr praktisch sein, wenn Sie einen abhängigen Wert dynamisch erstellen müssen, basierend auf Informationen, die Sie erst zur Laufzeit haben. Sie können basierend auf anderen Diensten und dem Anwendungsstatus eine fundierte Entscheidung darüber treffen, welcher Wert zurückgegeben werden soll.

Beispiel:

Versuchen wir zu erraten, von welchem mobilen Gerät aus ein Benutzer angemeldet ist. Wir werden versuchen, Informationen wie den Browser-User-Agent, die Bildschirmbreite und die Bildschirmhöhe zu verwenden. Definieren wir drei Token, die später zur Identifizierung des Gerätenamens verwendet werden.

Die InjectionTokenKlasse — Erstellt ein Token, das in Angular Dependency Injection verwendet werden kann. InjectionToken ist parametrisiert auf T Dies ist der Objekttyp, der von Injector zurückgegeben wird. Dies bietet ein zusätzliches Maß an Typensicherheit.

providers: providers: providers: 

Jetzt können wir einen Algorithmus entwickeln, um den Gerätenamen basierend auf den drei oben definierten Token zu erkennen. Wir übergeben eine Pfeilfunktion an die useFactory, die 3 Abhängigkeiten hat, um diese Abhängigkeiten aufzulösen, übergeben wir ein Abhängigkeitsarray (dep) mit den aufgelisteten Token.

providers: 

Schließlich werden wir den Gerätenamen in unserer Winkelkomponente verbrauchen.

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

Der Inject Parameter decorator gibt Angular DI an, dass dieser Parameter (deviceName) aus einem definierten Token — deviceName aufgelöst werden soll.

Das ist alles!

Folgen Sie mir auf Twitter #LanoTechno

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.