Angular Dependency Injection erklärt

Angular Dependency Injection erklärt

Überblick

Abhängigkeitsinjektion: Entwurfsmuster

Abhängigkeit: Ein Objekt eines bestimmten Typs, das vom Programm benötigt wird.

Dependency Injection Framework: Ein technisches Framework

Injector: Verwenden Sie seine API, um Instanzen von Abhängigkeiten zu erstellen

Anbieter: Wie erstellen? (Konstrukteur, Ingenieurfunktion)

Objekt: Komponenten, von Modulen benötigte Abhängigkeiten

Erweiterte Abhängigkeitsinjektion => Das Abhängigkeitsinjektion-Framework in Angular bietet hierarchische Abhängigkeiten vom Injektionstyp für Eltern und Kinder

1. Abhängigkeitsinjektion

Klassen-ID {
  statisches getInstance(Typ: Zeichenfolge): Id {
    gib neue ID zurück();
  }
}

Klasse Adresse {
  Konstruktor (Provinz, Stadt, Bezirk, Straße) {}
}

Klasse Person {
  Ich würde: Ich würde;
  Adresse: Adresse;
  Konstruktor() {
    diese.id = Id.getInstance("idcard");
    this.address = neue Adresse("Peking", "Hintergrund", "Bezirk Chaoyang", "xx-Straße");
  }
}

Problem: Die Person muss die Implementierungsdetails von Adresse und ID kennen.

Nachdem ID und Adresse umgestaltet wurden, muss die Person wissen, wie die Umgestaltung erfolgt.

Mit zunehmender Skalierung des Projekts ist die Wahrscheinlichkeit größer, dass Integrationsprobleme auftreten.

Klassen-ID {
  statisches getInstance(Typ: Zeichenfolge): Id {
    gib neue ID zurück();
  }
}

Klasse Adresse {
  Konstruktor (Provinz, Stadt, Bezirk, Straße) {}
}

Klasse Person {
  Ich würde: Ich würde;
  Adresse: Adresse;
  Konstruktor(id: Id, Adresse: Adresse) {
    diese.id = ID;
    diese.Adresse = Adresse;
  }
}

hauptsächlich(){
  //Verschiebe das konstruktionsabhängige Objekt auf die vorherige Ebene, wo es aufgerufen wird const id = Id.getInstance("idcard");
  const address = neue Adresse("Peking", "Hintergrund", "Bezirk Chaoyang", "xx Straße");
  const person = neue Person(ID, Adresse);
}

Die Person kennt die ID- und Adressdetails nicht mehr.

Dies ist die einfachste Form der Abhängigkeitsinjektion.

Das Problem besteht darin, dass Sie die Details im Main immer noch kennen müssen.

Idee: Immer eine Ebene nach oben drängen, bis man zur Einstiegsfunktion gelangt, die den Aufbau aller Objekte übernimmt. Nach der Konstruktion wird die Unterklasse allen abhängigen Untermodulen zur Verfügung gestellt.

Problem: Eingabefunktionen sind schwer zu warten. Zur Unterstützung ist daher ein Framework für die Abhängigkeitsinjektion erforderlich.

2. Angulars Dependency Injection Framework

Ab Version 5 wird es aufgrund seiner geringen Geschwindigkeit und der Einführung einer großen Menge an Code nicht mehr unterstützt und durch Injector.create ersetzt.

ReflectiveInjector: Wird zum Instanziieren von Objekten und Auflösen von Abhängigkeiten verwendet. importiere { Component ,ReflectiveInjector } von "@angular/core"; resolveAndCreate empfängt ein Provider-Array, das dem Injektor mitteilt, wie das Objekt zu konstruieren ist.

Konstruktor() {
    //Ein Provider-Array empfangen const injector = ReflectiveInjector.resolveAndCreate([
      {
        bereitstellen:Person, verwendenKlasse:Person
      },
      {
        angeben: Adresse, useFactory: ()=>{
          if (umgebung.produktion) {
            neue Adresse zurückgeben("Peking", "Hintergrund", "Bezirk Chaoyang", "Nr. xx, xx Straße");
          }anders{
            neue Adresse zurückgeben("Tibet", "Lhasa", "xx Bezirk", "xx Straße xx Nr.");
          }
        }
      },
      {
        angeben:Id, useFactory:()=>{
          gibt Id.getInstance('idcard') zurück;
        }
      }
    ]);
  }

Injektor:

Der Injektor entspricht der Hauptfunktion und kann alles im Abhängigkeitspool abrufen.

importiere { Komponente , ReflectiveInjector, Inject} aus "@angular/core";
importiere { OverlayContainer } von "@angular/cdk/overlay";
importiere { Bezeichner } aus "@angular/compiler";
importiere { stagger } von "@angular/animations";
importiere {Umgebung} aus „src/environments/environment“;

@Komponente({
  Selektor: "App-Root",
  Vorlagen-URL: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
exportiere Klasse AppComponent {

  Konstruktor(private oc: OverlayContainer) {
    //Ein Provider-Array empfangen const injector = ReflectiveInjector.resolveAndCreate([
      {
        bereitstellen:Person, verwendenKlasse:Person
      },
      {
        angeben: Adresse, useFactory: ()=>{
          if (umgebung.produktion) {
            neue Adresse zurückgeben("Peking", "Hintergrund", "Bezirk Chaoyang", "Nr. xx, xx Straße");
          }anders{
            neue Adresse zurückgeben("Tibet", "Lhasa", "xx Bezirk", "xx Straße xx Nr.");
          }
        }
      },
      {
        angeben:Id, useFactory:()=>{
          gibt Id.getInstance('idcard') zurück;
        }
      }
    ]);
    const person = injector.get(Person);
    console.log(JSON.stringify(Person));
  }

}

Klassen-ID {
  statisches getInstance(Typ: Zeichenfolge): Id {
    gib neue ID zurück();
  }
}

Klasse Adresse {
  Bereitstellung: Zeichenfolge;
  Stadt: Zeichenfolge;
  Bezirk:Zeichenfolge;
  Straße:Zeichenfolge;
  Konstruktor(Provinz, Stadt, Bezirk, Straße) {
    this.provice=provice;
    diese.Stadt=Stadt;
    dieser.Bezirk=Bezirk;
    diese.straße=Straße;
  }
}

Klasse Person {
  Ich würde: Ich würde;
  Adresse: Adresse;
  Konstruktor(@Inject(Id) id, @Inject(Adresse)Adresse) {
    diese.id = ID;
    diese.Adresse = Adresse;
  }
}

Sie können sehen, dass die Konsole die Personeninformationen ausdruckt.

Abkürzung:

 // {
      // bereitstellen: Person, useClass: Person
      // },
      Person, //abgekürzt als Person

Im Angular-Framework erledigt das Framework viele Aufgaben, und im Provider-Array registrierte Dinge werden automatisch im Pool registriert.

@NgModule({
  Importe: [HttpClientModule, SharedModule, AppRoutingModule, BrowserAnimationsModule],
  Deklarationen: [Komponenten],
  Exporte: [Komponenten, AppRoutingModule, BrowserAnimationsModule],
  Anbieter:
    {provide:'BASE_CONFIG',useValue:'http://localhost:3000'}
  ]
})
  Konstruktor(@Inject('BASE_CONFIG') Konfiguration) {
    console.log(config); //Die Konsole druckt http://localhost:3000 aus
  }

Angular ist standardmäßig ein Singleton, wenn Sie jedes Mal eine neue Instanz einfügen möchten. Es gibt zwei Möglichkeiten.

Geben Sie bei der Rückgabe zunächst eine Methode statt eines Objekts zurück.

{
    angeben: Adresse, useFactory: ()=>{
        Rückkehr ()=>{
            if (umgebung.produktion) {
                neue Adresse zurückgeben("Peking", "Hintergrund", "Bezirk Chaoyang", "Nr. xx, xx Straße");
            }anders{
                neue Adresse zurückgeben("Tibet", "Lhasa", "xx Bezirk", "xx Straße xx Nr.");
            }
        }
    }
},

2. Verwenden Sie den Eltern-Kind-Injektor.

Konstruktor(private oc: OverlayContainer) {
    //Ein Provider-Array empfangen const injector = ReflectiveInjector.resolveAndCreate([
      Person,
      {
        angeben: Adresse, useFactory: ()=>{
          if (umgebung.produktion) {
            neue Adresse zurückgeben("Peking", "Hintergrund", "Bezirk Chaoyang", "Nr. xx, xx Straße");
          }anders{
            neue Adresse zurückgeben("Tibet", "Lhasa", "xx Bezirk", "xx Straße xx Nr.");
          }
        }
      },
      {
        angeben:Id, useFactory:()=>{
          gibt Id.getInstance('idcard') zurück;
        }
      }
    ]);

    const childInjector = injector.resolveAndCreateChild([Person]);

    const person = injector.get(Person);
    console.log(JSON.stringify(Person));
    const personFromChild = childInjector.get(Person);
    console.log(person===personFromChild); //false
  }

Wenn der untergeordnete Injektor die Abhängigkeit nicht findet, sucht er im übergeordneten Injektor danach.

Oben finden Sie eine ausführliche Erklärung zur Angular-Abhängigkeitseinspritzung. Weitere Informationen zu Angular finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung des Singleton-Modus des Angular-Dienstes (unter Abhängigkeitsinjektionsmodus)
  • Tiefes Verständnis der Abhängigkeitsinjektion in Angular
  • Angular 4 Dependency Injection Lern-Tutorial: Verwendung von InjectToken (VIII)
  • Angular 4 Dependency Injection-Lern-Tutorial: Verwendung von ValueProvider (Teil 7)
  • AngularJS lernen Teil 2 AngularJS Dependency Injection
  • Beispielanalyse der Abhängigkeitsinjektion von AngularJS (mithilfe von Modul und Injektor)
  • Selbststudium zur Implementierung der AngularJS-Abhängigkeitsinjektion
  • Detaillierte Analyse der Abhängigkeitsinjektion $injector in Angular.JS Learning
  • AngularJS $injector Dependency Injection Detaillierte Erklärung

<<:  Detailliertes Beispiel der Sortierfunktion field() in MySQL

>>:  Diagramm zur Installation von VMware 14 unter Windows 10

Artikel empfehlen

Eine kurze Erläuterung zur Lösung des Depends_on-Reihenfolgeproblems in Docker-Compose

Die Verwendung von depends_on zum Sortieren von C...

Detaillierte grafische Erklärung zur Verwendung von SVG im Vue3+Vite-Projekt

Heute habe ich bei der Verwendung von SVG in der ...

Details zu den Überwachungseigenschaften der Uhr in Vue

Inhaltsverzeichnis 1.watch überwacht Änderungen i...

Detaillierte Einführung in den MySQL-Datenbankindex

Inhaltsverzeichnis Mindmap Einfaches Verständnis ...

So verwenden Sie CSS, um das übergeordnete Container-Div mit img-Bildern zu füllen und die Containergröße anzupassen

Wenn auf einer Seite mehrere Bilder eingefügt wer...

JavaScript Canvas zeichnet dynamische Drahtgittereffekte

In diesem Artikel wird der spezifische Code des d...

MySQL 8.0-Installationstutorial unter Linux

Dieser Artikel beschreibt Ihnen, wie Sie MySQL 8....

Vue implementiert Benutzeranmeldung und Token-Verifizierung

Im Falle einer vollständigen Trennung von Front-E...

Einfacher Vergleich von Meta-Tags in HTML

Das Meta-Tag wird verwendet, um Dateiinformationen...

Die untergeordnete Iframe-Seite betreibt die übergeordnete Seite und implementiert den Effekt der Abschirmung der Seiten-Popup-Ebene

Frage: In index.html führt iframe son.html ein. Wi...

Der MySQL-Server läuft mit der Option --read-only und kann diese Anweisung daher nicht ausführen.

Ich war in einer Besprechung, als ein Kollege anr...

Beschreiben Sie kurz die Verwendung und Beschreibung des MySQL-Primärschlüssels und des Fremdschlüssels

Inhaltsverzeichnis 1. Fremdschlüsseleinschränkung...

Dynamische Vue-Komponente

Inhaltsverzeichnis 1. Komponente 2. Keep-Alive-Mo...

Was ist HTML?

Geschichte der HTML-Entwicklung: HTML steht im En...

Lösung für das Problem, dass Emoji-Ausdrücke nicht in MySQL eingefügt werden können

Vorwort Ich dachte immer, dass UTF-8 eine univers...