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

So installieren Sie MySQL mit Yum auf Centos7 und stellen eine Remote-Verbindung her

Angular Dependency Injection erklärt

Inhaltsverzeichnis

Überblick

1. Abhängigkeitsinjektion

2. Angulars Dependency Injection Framework

So installieren Sie MySQL mit Yum auf Centos7 und stellen eine Remote-Verbindung her

So implementieren Sie verteilte Transaktionen in MySQL XA

Wie löst Vue das domänenübergreifende Problem des Axios-Request-Frontends?

So filtern Sie während einer vollständigen MySQL-Sicherung bestimmte Bibliotheken heraus

So extrahieren Sie Zeichenfolgenelemente aus nicht festen Positionen in MySQL

Implementierung der MySQL Master-Slave-Statusprüfung

Einige Referenzen zu Farben in HTML

Detailliertes Tutorial zum Kompilieren und Installieren von mysql8.0.29 in der LNMP-Umgebung von CentOS8

jQuery-Plugin für ein nahtloses Karussell

So erkennen Sie die Ubuntu-Version mithilfe der Befehlszeile

Artikel empfehlen

Zusammenfassung der Verwendung von Linux-SFTP-Befehlen

Tutorial zu HTML-Tabellen-Tags (11): Horizontales Ausrichtungsattribut ALIGN

So stellen Sie gelöschte MySQL 8.0.17-Root-Konten und Passwörter unter Windows wieder her

Webdesign-Tipps für Formular-Eingabefelder

Detaillierte Erläuterung der zu beachtenden Punkte bei HTML-Standards, die den W3C-Standards entsprechen

Vor- und Nachteile von bedingten Kommentaren im Internet Explorer

MySQL 5.7.20 Zip-Installations-Tutorial

Detaillierte Erklärung des Unterschieds zwischen temporärer MySQL-Tabelle und Partitionstabelle

MySQL SQL-Anweisung zum Suchen doppelter Daten basierend auf einem oder mehreren Feldern

Detaillierte Erklärung der globalen Variablenimplementierung von Uniapp

Detaillierte Erklärung, wie Sie den Speicherort der Nginx-Konfigurationsdatei finden

Detaillierte Erläuterung des Installationsprozesses von Jenkins auf CentOS 7

MySQL Master-Slave-Synchronisation, Implementierungsprinzip des Transaktions-Rollbacks

Reduzieren Sie die Speicher- und CPU-Auslastung durch die Optimierung von Webseiten

Detailliertes Tutorial zum Herunterladen, Installieren und Konfigurieren der neuesten Version von MySQL 8.0.21