Angular 2 Komponenten und Anbieter: Klassen, Fabriken und Werte

Kernpunkte

• Winkel 2 Komponenten können Anbieter verwenden, bei denen es sich um eine Reihe von injizierbaren Objekten handelt, die Komponenten verwenden können. Anbieter sind die Grundlage für Angular 2 -Abhängigkeitsinjektionssysteme (DI).
• Anbieter können in drei Typen unterteilt werden: Klassenanbieter, Fabrikanbieter und Wertanbieter. Der Klassenanbieter generiert eine Instanz der Klasse, der Fabrikanbieter generiert den Rückgabewert der angegebenen Funktion, und der Wertanbieter gibt seinen Wert direkt zurück.
Das DI -System von
• Angular 2 ermöglicht das Registrieren von Klassen, Funktionen oder Werten (als Anbieter genannte Anbieter), die Lösung von Abhängigkeiten zwischen Anbietern, die Funktionsweise des Anbieters in Code und die Aufrechterhaltung der Injektor -Hierarchie.
• Angular's Injector erstellt nur einmal eine Instanz des Klassenanbieters und schneidet ihn aus. Diese Funktion bietet Ihnen die Flexibilität, die von einem Anbieter generierten Ergebnisse zu steuern und ob wir eine einzelne Instanz oder mehrere Instanzen verwenden.
• Angular 2 ermöglicht die Registrierung eines Anbieters mit einem Schlüssel, der mit dem tatsächlichen Anbieter verbunden ist (genannt "Token"). Diese Funktion ist nützlich für Unit -Tests, wobei eine Scheinklasse, bei der keine Serveranrufe ausgeführt werden, ohne Änderung des Komponentencodes ersetzt werden kann.

im vorherigen Artikel wurde erläutert, wie man @Input und @Output Anmerkungen verwendet, um Daten in und aus Komponenten zu übergeben. In diesem Artikel wird ein weiterer grundlegender Aspekt von Winkel 2 Komponenten eingeführt - ihre Fähigkeit, Anbieter zu verwenden.

Sie haben möglicherweise "Anbieter" in der Liste der Komponentenkonfigurationseigenschaften gesehen, und Sie können erkennen, dass Sie einen Satz injizierbarer Objekte definieren können, die für eine Komponente verwendet werden können. Das ist gut, aber natürlich wirft es die Frage auf "Was ist ein Anbieter?"

Beantworten Sie diese Frage erfordert eine detaillierte Diskussion des Abhängigkeitsinjektionssystems (Abhängigkeitsinjektion). In zukünftigen Blog -Beiträgen können wir speziell DI behandeln, aber eine Reihe von Artikeln von Pascal Precht führt dies sehr gut vor: https://www.php.cn/link/f7f3bfce09a3008d185e1775549ec2d2 di und Angular 2 und Anghular 2 und Angular 2 2

und Angular 2 2 und Angular 2 2 und Anghar 2 und Anghar 2 2 und Anghar 2 2 und Anghar 2) und Anghar 2 und Anghar 22D2. DI -Systeme (wie in Pascals Artikel beschrieben), aber kurz gesagt, das DI -System ist verantwortlich für:

• Registrieren Sie eine Klasse, Funktion oder einen Wert. Im Kontext der Abhängigkeitsinjektion werden diese Elemente als "Anbieter" bezeichnet, weil sie Ergebnisse erzielen. Zum Beispiel werden Klassen verwendet, um Instanzen bereitzustellen oder zu generieren. (Weitere Informationen zu Anbietertypen finden Sie weiter.)
• Lösen Sie Abhängigkeiten zwischen Anbietern - zum Beispiel, wenn ein Anbieter einen anderen benötigt.
• Wenn wir die Ergebnisse des Anbieters anfordern, funktionieren die Ergebnisse des Anbieters im Code. Dieser Vorgang (das den Codeblock zur Verfügung steht) wird als "injizieren" bezeichnet. Der Code, der die Ergebnisse des Anbieters injiziert, wird logisch als "Injektor" bezeichnet.
• Behalten Sie die Hierarchie des Injektors bei, sodass DI die Ergebnisse des nicht verfügbaren Anbieters in seinem Injektor in seinem Injektor anfordert, die Hierarchie des Injektors durchsucht.

In früheren Artikeln haben wir ein Diagramm eingeschlossen, das Komponenten zeigt, die eine Hierarchie bilden, die mit der Stammkomponente beginnt. Ergänzen wir dieses Diagramm, um den Injektor und seine registrierten Ressourcen (Anbieter) zu enthalten:

Abbildung 1: Jede Komponente hat einen eigenen Injektor für die Registrierung eines Anbieters. Der Injektor erstellt einen Subinjektor, Anfragen an den Anbieter starten mit dem lokalen Injektor und sucht die Injektorhierarchie auf.

Von oben können wir sehen, dass die Komponenten zwar einen Richtungsgraphen nach unten bilden, ihre zugehörigen Injektoren jedoch eine bidirektionale Beziehung haben: Der übergeordnete Injektor erstellt einen untergeordneten Injektor (nach unten), wenn der Anbieter angefordert wird, wenn die Komponente der angeforderte Anbieter nicht ist In seinem eigenen Injektor finden Angular 2 den übergeordneten Injektor (UP) durchsucht. Dies bedeutet, dass Anbieter mit derselben Kennung auf der unteren Ebene die Anbieter mit demselben Namen auf höherer Ebene abdecken (ausblenden).

Was ist ein Anbieter?

Was sind diese "Anbieter", die vom Injektor auf jeder Ebene registriert sind? Es ist eigentlich sehr einfach: Der Anbieter ist eckig, um die Ressource oder das JavaScript -Ding zu erstellen (zu generieren, zu generieren), die wir verwenden möchten:

• Klassenanbieter generiert/bietet Instanzen der Klasse.
• Der Fabrikanbieter generiert/liefert den zurückgegebenen Inhalt, der beim Ausführen der angegebenen Funktion zurückgegeben wird.
• Der Wertanbieter muss keine Maßnahmen wie die beiden vorherigen ergreifen, um das Ergebnis bereitzustellen, sondern nur seinen Wert zurückgibt.

Leider bezieht sich der Begriff "Anbieter" manchmal auf eine Klasse, Funktion oder Wert und auch auf etwas, das vom Anbieter generiert wurde - eine Klasseninstanz, einen Rückgabewert oder einen Rückgabewert einer Funktion.

Lassen Sie uns sehen, wie wir Anbieter zu Komponenten hinzufügen können, indem wir Klassenanbieter mit MyClass erstellen (eine einfache Klasse, die die Instanzen generiert, die wir in unserer Anwendung verwenden möchten).

Abbildung 2: Einfache Klasse mit vier Attributen. (Code -Screenshot aus Visual Studio Code)

Okay, das ist die Klasse. Legen wir nun Angular an, den Klassenanbieter zu registrieren, damit wir das Abhängigkeitsinjektionssystem bitten können, eine Instanz für uns in unserem Code zu bieten. Wir erstellen eine Komponente ProvDemo_01.ts, die als Stammkomponente der Anwendung verwendet wird. Wir laden diese Komponente in bootstrap.ts und starten unsere Anwendung:

Abbildung 3: Starten Sie die Datei bootstrap.ts, die die Stammkomponente instanziiert.

Wenn das Obige keinen Sinn ergibt, lesen Sie unseren vorherigen Artikel, der den Prozess des Erstellens einer einfachen Angular 2 -Anwendung abdeckt. Unsere Stammkomponente heißt ProvDemo und das Repository enthält verschiedene Versionen der Komponente. Sie können die angezeigte Version ändern, indem Sie die von ProvDemo importierte Zeile aktualisieren. Die erste Version unserer Stammkomponente sieht folgendermaßen aus:

Abbildung 4: Importieren Sie MyClass CompDemo, fügen Sie es dem providers -Array hinzu und verwenden Sie es als Typ im Konstruktorparameter.

zu dieser Komponente addiert MyClass ist einfach zu liefern:

• import MyClass
• füge es zu @Component 's 🎜>' s Eigenschaft providers hinzu
Fügen Sie dem Konstruktor
• einen Parameter vom Typ "MyClass" hinzu

Hinter den Kulissen schafft das DI -System, wenn Angular eine Komponente instanziiert, einen Injektor für die Komponente, die den Anbieter

registriert. Angular sieht dann den in der Parameterliste des Konstruktors angegebenen MyClass -Typs und sucht nach dem neu registrierten MyClass -Anbieter und generiert sie, um eine Instanz zu generieren, die dann "MyClass" (anfänglicher Kleinbuchstaben "m") zugeordnet ist. myClass

Der Prozess des Findens des

-Anbieters und des Generierens der Instanz, die "MyClass" zugeordnet werden soll, wird beide durch Angular erledigt. Es verwendet die TypeScript -Syntax, um den Typ zu verstehen, um zu suchen, aber der Injektor von Angular ist dafür verantwortlich, myClass Instanzen zu finden und zurückzugeben. MyClassIn Anbetracht des oben genannten

können Sie zu dem Schluss kommen, dass Angular eine Liste von Klassen im Array "providers" enthält und eine einfache Registrierung erstellt, um die Klasse abzurufen. Für eine erhöhte Flexibilität gibt es jedoch eine subtile Anpassung. Einer der Hauptgründe für die Notwendigkeit, "abgestimmt" zu werden, besteht darin, uns zu helfen, Unit -Tests von Komponenten zu schreiben, die Anbieter haben, die wir in der Testumgebung nicht verwenden möchten. Es gibt nicht viele Gründe, echte Dinge für MyClass zu verwenden. Wenn jedoch MyClass den Server zum Abrufen von Daten aufruft, möchten wir dies möglicherweise nicht in einer Testumgebung. Um dieses Problem zu lösen, müssen wir in der Lage sein, die Simulation in ProvDemo zu ersetzen, die keine Serveranrufe tätigen. MyClass

Wie machen wir den Ersatz? Müssen wir den gesamten Code durchfliegen und jeden

auf MyClass ändern? Dies ist nicht effizient und ein schlechtes Muster für das Schreiben von Tests. MyClassMock

Wir müssen die Anbieterimplementierung ersetzen, ohne den

-Komponentencode zu ändern. Um dies zu erreichen, wird bei der Registrierung eines Anbieters eine Karte eingerichtet, um einen Schlüssel (als "Token" bezeichnet) mit dem tatsächlichen Anbieter zu verknüpfen. Im obigen Beispiel sind das Token und der Anbieter dasselbe: ProvDemo. Das zum MyClass Dekorateur hinzugefügte MyClass -attribut wird für: @Component abgekürzt providers

Dies bedeutet "Verwenden Sie

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

als Token (Schlüssel), um den Anbieter zu finden und den Anbieter auf

festzulegen, damit das Abhängigkeitsinjektionssystem bei der Anfrage des Anbieters die MyClass -Stanz zurückgibt". Die meisten von uns sind es gewohnt, Schlüssel als Zahlen oder Saiten zu behandeln. Aber in diesem Fall ist das Token (Schlüssel) die Klasse selbst. Wir können auch Zeichenfolgen als Token verwenden, um Anbieter wie folgt zu registrieren: MyClass MyClass

Wie hilft uns dies, den Test durchzuführen? Dies bedeutet, dass wir in einer Testumgebung die Anbieterregistrierung überschreiben und Folgendes effektiv ausführen können:

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

Dies verbindet den Token (Schlüssel)

<code>provide(MyClass, {useClass: MyClassMock})
</code>

dem Klassenanbieter

. Wenn unser Code das DI -System verlangt, muss wir MyClass in den Test einfügen, wir erhalten eine Instanz von MyClassMock, die Datenanrufe schmieden kann. Der Endeffekt ist, dass jeder Code gleich bleibt und wir uns keine Sorgen machen müssen, ob der Unit -Test einen Server aufruft, der möglicherweise nicht in der Testumgebung vorliegt. MyClass MyClassMock Injizieren Sie den Non-Class-Anbieter

oben injizieren wir den Konstruktor die Klassenanbieterinstanz, indem wir den folgenden Code schreiben:

Mit

TypeScript können wir angeben, dass der Parameter

<code>constructor( myClass: MyClass ) {...}
</code>

vom Typ

sein muss und das DI -System die Arbeit erledigt und uns myClass Instanzen liefert. MyClass

Aber wenn wir String -Token anstelle von Klassen verwenden, wie können wir Angular sagen, dass wir unsere Anbieterergebnisse injizieren sollen? Bearbeiten wir die bootstrap.ts Datei, um einen neuen Wertanbieter hinzuzufügen und sie mit einem String -Token zu registrieren. Denken Sie daran, dass ein Wertanbieter ein Anbietertyp ist, der den mit dem Token verbundenen Wert zurückgibt. Im obigen Beispiel geben wir Angular an, Anbieter zu registrieren, indem wir sie zum @Component -attribut von providers hinzufügen. Attribute): providers

Abbildung 5: des Wertanbieters hinzugefügt. bootstrap.ts

Hier fügen wir den Anbieter hinzu, indem wir die Funktion

aufrufen und in einem String -Token ("provide") und einem Objekt übergeben, das angibt, dass wir einen Wertanbieter und den Anbieter selbst erstellen möchten - in diesem Fall ist es ein einfacher Wert. Jetzt wollen wir den vom Wertanbieter generierten Wert in unseren Konstruktor injizieren, aber das funktioniert nicht ... SECURITY_KEY

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

Dies liegt daran, dass "

" kein Typ ist. Um Anbieter mit Token mit Nichtklassen zu injizieren, bietet Angular einen SECURITY_KEY Parameterdekorator. Wie alle anderen Dekorateure müssen wir es importieren, und dann verwenden wir es, um Angular zu sagen, dass wir den mit unserem String -Token zugeordneten Anbieter injizieren können. Dazu stellen wir @Inject: create ProvDemo_02.ts ein

Abbildung 6: Importieren Sie den Dekorator "" und verwenden Sie ihn, um den mit dem String -Token identifizierten Wertanbieter zu injizieren. Inject

Wir können die gleiche Syntax mit

Anbieter injizieren: MyClass

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

Okay, wir haben gelernt, wie man Anbieter registriert und verwendet, aber schauen wir uns an, welche Anbieter zurückkehren.

Anbieter und Singleton

Wie wir oben gesehen haben, ist der Anbieter dafür verantwortlich, die Dinge zu generieren, die injiziert werden sollen. Der Klassenanbieter generiert eine Instanz und injiziert sie in ihn. Es ist jedoch wichtig zu verstehen, dass Sie nicht jedes Mal eine neue Instanz erhalten, wenn Sie das Ergebnis des Klassenanbieters injizieren. Stattdessen generiert das DI -System einmal eine Instanz, schneidet sie bei jeder nachfolgenden Injektion bei jeder Verwendung desselben Anbieters für jede nachfolgende Injektion.

Der letzte Punkt ist wichtig, da jede Komponente einen eigenen Injektor und einen eigenen registrierten Anbieter hat.

hat ein Zeitattribut für die aktuelle Zeit (in Millisekunden) und eine zufällige Zahl, die uns hilft, zu sehen, ob wir jedes Mal die gleiche Instanz erhalten. Wir werden der Anwendung eine MyClass -Komponente hinzufügen. ChildComp

Abbildung 7: Inject MyClass in den Konstruktor. ChildComp

Beachten Sie, dass wir

importieren und den Typ in der Konstruktorparameterliste festlegen. Wichtig: Der einzige Zweck von MyClass importiert MyClass ist als Token, das vom DI -System verwendet wird, um den registrierten Anbieter zu finden. ChildComp Weil seinen eigenen Anbieter nicht mit dem Token registriert, schaut Angular die Injektorhierarchie nach, um einen zu finden. Damit dies funktioniert, müssen wir der ChildComp -Komponente ChildComp addieren: ProvDemo

Abbildung 8: s ChildComp wurde der Vorlage hinzugefügt. ProvDemo

Wir importieren

, fügen Sie das Attribut ChildComp zu @Component hinzu, um directives zu sagen. Wir werden die ProvDemo -Komponente verwenden und das Element ChildComp zur Vorlage hinzufügen. Wenn die Anwendung ausgeführt wird, zeigt die Konsolenausgabe, dass sowohl ChildComp als auch ProvDemo dieselbe ChildComp Instanz empfangen: MyClass

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

Lassen Sie uns nun

zu seinem Injektoranbieter addieren: ChildComp MyClass

Abbildung 9: Definieren Sie Ihr eigenes

Anbieter . MyClass ParentComp Das einzige, was wir ändern, ist, die

-Merkmale zur

-Notation hinzuzufügen. Natürlich können wir sehen, dass zwei verschiedene @Component Instanzen erstellt wurden: providers MyClass

Diese Funktion von Angular bietet viel Flexibilität für die von einem Anbieter generierten Ergebnisse und ob wir eine einzelne Instanz oder mehrere Instanzen verwenden möchten. Beispielsweise können Sie die Komponente in einen Repeater einfügen, um die Komponente mehrmals zu generieren. Wenn diese doppelte Komponente seinen eigenen Anbieter registriert, erhält jede Komponente einen einzigartigen Anbieter. Wenn Sie jedoch nur einen Anbieter in der übergeordneten Komponente registrieren, teilt jede doppelte Instanz den Anbieter der übergeordneten Komponente.

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

Zusammenfassung

In diesem Artikel definieren wir, was ein Anbieter ist, und führt drei verschiedene Arten von Anbietern ein. Wir haben uns dann angesehen, wie man einen Anbieter für die Komponente registriert und wie die vom Anbieter generierten Ergebnisse in die Komponente injiziert werden. Wir haben uns auch angesehen, wie Angular die Injektorhierarchie verwendet, um den angeforderten Anbieter zu finden. Angular gibt Ihnen mehr Kontrolle darüber, wie Abhängigkeitsinjektionssysteme funktionieren und wo Sie Anbieter finden können. In den oben genannten sollte Ihnen jedoch helfen, Anbieter in Ihrer Angular 2 -Anwendung zu erstellen und zu verwenden.

FAQs über Winkel 2 Komponenten, Anbieter, Klassen, Fabrik und Werte (FAQ)

Was ist der Unterschied zwischen einer Klasse und einer Fabrik in Angular 2?

In Angular 2 sind Klassen die Blaupausen zum Erstellen von Objekten. Es verkauft die Daten und Funktionen, die diese Daten betreiben. Andererseits ist eine Fabrik ein Muster zum Erstellen von Objekten. In Angular 2 werden Fabriken verwendet, um Dienste oder Werte zu erstellen und zu konfigurieren, die keine expliziten Klassen darstellen. Die Fabrik bietet eine Möglichkeit, verschiedene Instanzenklassen basierend auf Kontext oder Konfiguration zu generieren.

Wie interagieren Komponenten und Anbieter in Angular 2?

In Angular 2 arbeiten Komponenten und Anbieter zusammen, um eine dynamische und interaktive Benutzeroberfläche zu erstellen. Komponenten sind Bausteine ​​von Winkelanwendungen, und Anbieter werden verwendet, um Dienste zu erstellen, die Komponenten verwenden können. Mit Anbietern ermöglichen es Komponenten, Daten und Funktionen zu teilen, wodurch die Wartung und Aktualisierung von Anwendungen erleichtert wird.

Was macht der Wert in Angular 2?

Die Werte in Angular 2 werden verwendet, um Konfigurationsinformationen für andere Teile der Anwendung bereitzustellen. Sie können in Controller, Dienste und Fabriken injiziert werden, sodass diese Teile der Anwendung zur Laufzeit konfiguriert werden können. Dies macht die Anwendung flexibler und einfacher zu testen.

Wie binden Sie Klassen in Angular 2?

Klassenbindung in Angular 2 ist eine Möglichkeit, CSS -Klassen dynamisch zu Elementen hinzuzufügen und zu entfernen. Sie können eine Klasse an einen Ausdruck binden, der dem Element hinzugefügt wird, wenn der Ausdruck an True bewertet wird. Wenn der Ausdruck auf False bewertet wird, wird die Klasse gelöscht. Auf diese Weise können Sie dynamische und interaktive Benutzeroberflächen erstellen.

Was ist die API im Kontext von Angular 2?

im Kontext von Angular 2 ist die API (Anwendungsprogrammierschnittstelle) eine Reihe von Regeln und Protokollen, die zum Erstellen und Interaktion mit Softwareanwendungen verwendet werden. Angular 2 bietet eine reiche API, mit der Entwickler komplexe Anwendungen mit weniger Code und Anstrengung erstellen können. Die Angular 2 -API enthält Funktionen zum Erstellen von Komponenten, Diensten, Anweisungen, Pipelines und mehr.

Wie kann man eine Fabrik in Angular 2 verwenden?

Um eine Fabrik in Angular 2 zu verwenden, müssen Sie sie zunächst definieren. Dies geschieht durch das Erstellen einer Funktion, die das Objekt zurückgibt, das die Fabrik generieren soll. Sie können diese Fabrik dann mit der .factory -Methode mit dem Winkelmodul registrieren. Sobald die Fabrik registriert ist, können Sie sie in andere Teile der Anwendung wie Controller und Dienste injizieren.

Wie erstellt man Komponenten in Angular 2?

Erstellen einer Komponente in Angular 2 beinhaltet die Definition einer Klasse und die Dekoration mit dem @Component -Dekorator. @Component Der Dekorateur sagt Angular, dass die Klasse eine Komponente ist und Metadaten bereitstellt, die bestimmt, wie die Komponente verarbeitet, instanziiert und zur Laufzeit verwendet wird.

Wie man Anbieter in Angular 2 verwendet?

Der Anbieter in Angular 2 wird verwendet, um Dienste für den Anwendungsabschnitt zu erstellen und bereitzustellen. Um einen Anbieter zu verwenden, müssen Sie ihn zunächst beim Winkelmodul registrieren. Nach der Registrierung kann der Anbieter in Komponenten, andere Dienste und sogar andere Anbieter injiziert werden.

Wie erstellt man einen Dienst in Angular 2?

Erstellen eines Dienstes in Angular 2 beinhaltet die Definition einer Klasse, die die vom Dienst bereitgestellten Zahlen und Funktionen zusammenfasst. Diese Klasse wird dann mit einem @Injectable -Dekorator dekoriert, der Angular sagt, dass die Klasse ein Dienst ist, der in andere Teile der Anwendung injiziert werden kann.

Wie verwendet man Werte in Angular 2?

Die Werte in Angular 2 werden verwendet, um Konfigurationsinformationen für andere Teile der Anwendung bereitzustellen. Um einen Wert zu verwenden, müssen Sie ihn zunächst mit dem Winkelmodul registrieren. Nach der Registrierung kann der Wert in den Controller, den Dienst und die Fabrik injiziert werden.

Das obige ist der detaillierte Inhalt vonAngular 2 Komponenten und Anbieter: Klassen, Fabriken und Werte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!