Eine Schritt-für-Schritt-Anleitung zum Verständnis der Abhängigkeitsinjektion in Angular

In diesem Artikel erfahren Sie mehr über die Abhängigkeitsinjektion, stellen die Probleme vor, die die Abhängigkeitsinjektion löst, und ihre native Schreibmethode und sprechen über das Abhängigkeitsinjektions-Framework von Angular. Ich hoffe, dass es für alle hilfreich ist!

In letzter Zeit bin ich in Angular-Projekten oft auf die Keyword-Abhängigkeitsinjektion gestoßen, aber ich verstehe immer noch nicht, wie sie implementiert wird. Auf der offiziellen Website von Angular wird nur über ihre Verwendung gesprochen und die detaillierten Prinzipien werden nicht erläutert Lassen Sie uns also anhand der nativen Schreibmethode erklären, welche Probleme mit der Abhängigkeitsinjektion gelöst werden und wie sie mit js ausgedrückt werden sollte. [Verwandte Tutorial-Empfehlungen: „Angular-Tutorial“]

Was ist Abhängigkeitsinjektion, auch als DI bezeichnet, ist ein Entwurfsprinzip in der objektorientierten Programmierung, das verwendet wird, um die Kopplung zwischen Codes zu reduzieren.

Schauen wir uns zuerst einen Code an

rrree

Angenommen, wir verwenden eine Videoklasse, die über eine Methode getScreenshot verfügt, um Screenshots zu erhalten. Beim Instanziieren der Videoklasse müssen wir einen Parameter wie eine Video-URL übergeben. Jetzt gibt es eine Notizklasse, die die Screenshot-Methode unter der Videoklasse aufrufen muss. Dann können wir sagen, dass die Notizklasse von der Videoklasse abhängt. Innerhalb der Notizklasse müssen wir also die Videoklasse instanziieren, damit wir das Instanzobjekt der Videoklasse in der Notizklasse abrufen und darin die Screenshot-Methode aufrufen können.

Die Kopplung des oben genannten Codes ist zu hoch und wird nicht empfohlen. Wenn beispielsweise die Videoadresse von Video geändert wird, muss die eingehende Video-URL geändert werden. Dies setzt voraus, dass weitere Klassen davon abhängen on Bei Videos muss, sobald Änderungen vorgenommen wurden, alles entsprechend geändert werden, was sehr unpraktisch ist.

Als nächstes verwenden wir die Abhängigkeitsinjektion, um das obige Problem zu lösen:

class Video{
    constructor(url){}
}

class Note{
    video: Video
    constructor(){
        this.video = new Video("https://aaaaa.mp4")
    }
    
    getScreenshot(){
        this.video.getScreenshot()
    }
}

const note = new Note()
note.getScreenshot()

Wir instanziieren die Videoklasse außerhalb der Klasse und übergeben die Instanz durch Parameterübergabe an die Notizklasse. Auf diese Weise kann auch der Kopplungsgrad erfolgreich gelöst werden Da es sich um ein großes Problem handelt, nennen wir diese Art, Instanzen durch Parameter zu übergeben: Injektion.

Vorteile

Durch die Abhängigkeitsinjektion wird die Kopplung zwischen Codes verringert und die Wartbarkeit des Codes erhöht. Codeänderungen in der Videoklasse haben keine Auswirkungen auf die Notizklasse.

Angulars DI-Framework

Im obigen Implementierungsprozess gibt es noch eine Sache, die nicht besonders ideal ist: Wir müssen die Videoklasse außerhalb der Klasse instanziieren. Obwohl dies der einzige Ort ist, hoffen wir immer noch, dass dies der Fall ist Videoklasse Unabhängig davon, wie Sie sie intern ändern, hat dies keine Auswirkungen auf den externen Code.

Im von Angular bereitgestellten DI-Framework müssen wir die Videoklasse nicht selbst instanziieren. Für Entwickler müssen nur sehr einfache Abhängigkeitsinjektionsfunktionen verwendet werden.

Es gibt vier Kernkonzepte in Angulars DI:

Abhängigkeit: das Instanzobjekt, von dem die Komponente abhängt, das Dienstinstanzobjekt

• Token: Ruft die Identität des Dienstinstanzobjekts ab, Angular verwaltet viele Instanzen Objekte Wenn wir es erhalten müssen, müssen wir es durch Identifizierung erhalten

• Injektor: Injektor, verantwortlich für die Erstellung und Verwaltung von Instanzobjekten von Serviceklassen, das Einfügen von Serviceinstanzobjekten in Komponenten und deren Weitergabe an jede Komponente Parameter

• Procider: Objekt, das zum Konfigurieren des Injektors verwendet wird, die Dienstklasse angibt, um das Dienstinstanzobjekt zu erstellen und die Kennung des Instanzobjekts abzurufen

• Injektor-Injektor

Wir erstellen zunächst einen Injektor über die grundlegende Syntax Bereitgestellt von Angular

ReflectiveInjector wird verwendet, um ein Array zu erstellen Injektor. 2. Holen Sie sich das Serviceklassen-Instanzobjekt im Injektor

class Note{
    video: Video
    constructor(video: Video){
        this.video = Video;
    }
}

const video = new Video("https://aaaaa.mp4")
const note = new Note(video)

Unter dem Injektor gibt es eine Get-Methode, mit der der Bezeichner übergeben und das Instanzobjekt abgerufen wird. Der Standardbezeichner ist der Name der Serviceklasse Video

damit wir das Instanzobjekt von Video erhalten können. Das von Angular bereitgestellte DI-Framework macht es für uns überflüssig, eine Klasse manuell zu instanziieren.

2. Das Instanzobjekt des Dienstes befindet sich im Singleton-Modus. Wenn der Injektor die Dienstinstanz erstellt, bereut er das Zwischenspeichern. Das heißt, egal wie oft das Instanzobjekt über das Framework abgerufen wird Gibt das gleiche Instanzobjekt zurück

3. Wir können jedoch mehrere Injektoren erstellen, die von verschiedenen Injektoren zurückgegeben werden. Es gibt eine Methode zum Erstellen eines untergeordneten Injektors ist discoverAndCreateChild. Die Beziehung zwischen dem übergeordneten Injektor und dem untergeordneten Injektor ähnelt der Gültigkeitskette von js. Wenn der aktuelle Injektor nicht gefunden werden kann, wird er zum übergeordneten Injektor weitergeleitet. wie zum Beispiel:

const injector = ReflectiveInjector.resolveAndCreate([ Video ])
const injectorChild = injector.resolveAndCreateChild([])

const video1 = injector.get(Video)
const video2 = injectorChild.get(Video)

console.log(video1 === video1)//true

像上面这段代码，我们在创建子级注入器的时候，不传递参数，但是在子级注入器实例化的时候，由于自身不存在 Video 这个服务，它就会去父级查找，当然，就找到了父级的 Video 这个服务并且实例化，所以后面的两个实例化对象相等

总结

本文介绍了依赖注入解决的问题和它原生的写法是什么用的，并且介绍了Angular提供给我们的DI框架，用它提供给我们的简单api实现了实例化的过程，并且讲解了注入器，也是会分层级的，能提供给我们更好地一个项目设计方式。之后有机会再来讲解一下provider以及更多的扩展。

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonEine Schritt-für-Schritt-Anleitung zum Verständnis der Abhängigkeitsinjektion in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!