Angular Dependency Injection erklärt

Inhaltsverzeichnis

Überblick
1. Abhängigkeitsinjektion
2. Angulars Dependency Injection Framework

Ü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

Unterscheidung zwischen Linux-Hardlinks und Softlinks

Artikel empfehlen

CSS erzielt den Effekt, dass die äußerste Schicht einer mehrschichtigen verschachtelten Struktur rotiert, während die anderen Schichten unverändert bleiben.

Es gibt ein solches Szenario: ein kreisförmiger C...

Angular Dependency Injection erklärt

Inhaltsverzeichnis

Überblick

1. Abhängigkeitsinjektion

2. Angulars Dependency Injection Framework

Unterscheidung zwischen Linux-Hardlinks und Softlinks

Fehlerbehebung bei Master-Slave-Verzögerungsproblemen beim Upgrade von MySQL 5.6 auf 5.7

Detaillierte Erläuterung der nahtlosen horizontalen LVM-Festplattenerweiterung basierend auf Linux

Hinweise zur Verwendung von Textarea

Implementierung des Scroll-Snap-Scroll-Ereignisstopps und der Elementpositionserkennung in CSS

Vue+Element UI realisiert die Kapselung von Dropdown-Menüs

Detaillierte Erklärung des Lebenszyklus einer Angular-Komponente (I)

N Möglichkeiten, ein Div mit einzeiligem/mehrzeiligem Text vertikal zu zentrieren (unbekannte Höhe/feste Höhe)

Entwicklungsdetails von Vue3-Komponenten

So verwenden Sie vs2019 für die Linux-Remote-Entwicklung

Artikel empfehlen

CSS erzielt den Effekt, dass die äußerste Schicht einer mehrschichtigen verschachtelten Struktur rotiert, während die anderen Schichten unverändert bleiben.

Detaillierte Erklärung des JSON-Dateischreibformats

Einige Dinge, die beim Erstellen einer Webseite zu beachten sind

Detaillierte Erläuterung zur Verwendung von Amoeba zum Implementieren der Lese-/Schreibtrennung einer MySQL-Datenbank

Detaillierte Erläuterung zum Hinzufügen von Sicherheitsgruppenregeln zum Alibaba Cloud Server (grafisches Tutorial)

Tutorial zum Erstellen des File-Sharing-Dienstes Samba unter CentOS6.5

Tiefgreifendes Verständnis der Verwendung des Schlüsselworts „infer“ in Typescript

So verstehen und identifizieren Sie Dateitypen in Linux

Axios storniert wiederholte Anfragen

Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS

vue+element-ui implementiert die Kopfnavigationsleistenkomponente

JavaScript implementiert einfaches Scrollfenster

MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Docker

Führt MySQL die Aktualisierungsanweisung erneut aus, wenn sie dieselben Daten enthält wie die ursprüngliche?

So erstellen Sie PHP7 mit einem benutzerdefinierten Docker-Image