Wie funktioniert die Abhängigkeitsinjektion über Angular 2-Komponenten hinaus?

Injizieren von Diensten in Angular 2 (Beta)

In Angular 2 ist das Einfügen eines Dienstes in eine Komponente unkompliziert, aber wie können wir es nutzen? Abhängigkeitsinjektion (DI), um Dienste über Komponenten hinaus zu übertragen?

Dienste außerhalb von Komponenten injizieren

Um dies zu erreichen, annotieren wir die gewünschten Dienste mit dem @Injectable-Dekorator. Dieser Dekorator gibt an, dass die Parameter innerhalb des Konstruktors der annotierten Klasse Injektionen erhalten sollen.

Den Injektionsmechanismus verstehen

Der DI-Mechanismus in Angular 2 arbeitet auf einem Baum von Injektoren in einer hierarchischen Struktur verknüpft. Diese Injektoren sind dem Komponentenbaum zugeordnet, es gibt jedoch keine spezifischen Injektoren für Dienste.

Wenn ein Dienst mit @Injectable annotiert ist, versucht Angular, für den aktuellen Zeitpunkt eine Instanz für diesen Diensttyp innerhalb des Injektors zu erstellen oder abzurufen Ausführungskette.

Beispiel: Service-Injection-Kette

Betrachten Sie die folgende Beispielanwendung:

• AppComponent (Hauptkomponente)
• ChildComponent (Unterkomponente)
• Service1 (verwendet von ChildComponent)
• Service2 (verwendet von Service1)

Jeder Service und jede Komponente ist mit @Injectable annotiert.

Injektorhierarchie und Service-Injection

In dieser Anwendung haben wir drei Injektoren:

• Anwendungsinjektor (konfiguriert während des Bootstrappings)
• AppComponent-Injektor (konfiguriert über sein Provider-Attribut)
• ChildComponent-Injektor (ähnlich konfiguriert)

Beim Injizieren von Service1 in ChildComponent sucht Angular zuerst im ChildComponent-Injektor nach einem Service1-Anbieter , dann im AppComponent-Injektor und schließlich im Anwendungsinjektor.

Ähnlich findet beim Injizieren von Service2 in Service1 der gleiche Suchvorgang statt.

Anbieterumfang und Injektorhierarchie

Dieser Suchprozess bestimmt, wo Dienstinstanzen instanziiert und geteilt werden. Anbieter können auf verschiedenen Ebenen angegeben werden:

• Anwendungsebene: Instanzen werden in der gesamten Anwendung gemeinsam genutzt.
• Komponentenebene: Instanzen werden innerhalb der Komponente, ihrer Unterkomponenten und abhängigen Dienste gemeinsam genutzt.

Fazit

Durch die Nutzung des @Injectable-Dekorators und das Verständnis des DI-Mechanismus in Angular 2 können wir Dienste effektiv zwischen Komponenten und Diensten injizieren, was uns dies ermöglicht Organisieren und teilen Sie Abhängigkeiten nach Bedarf.

Das obige ist der detaillierte Inhalt vonWie funktioniert die Abhängigkeitsinjektion über Angular 2-Komponenten hinaus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!