In der Angular-Projektentwicklung verwenden wir normalerweise die Bindung von Eingabeeigenschaften und die Bindung von Ausgabeereignissen für die Komponentenkommunikation. Eingabe und Ausgabe können jedoch nur in der Eltern-Kind-Kommunikation verwendet werden Komponenten. Informationen übertragen. Komponenten bilden einen Komponentenbaum basierend auf der aufrufenden Beziehung. Wenn es nur Eigenschaftsbindungen und Ereignisbindungen gibt, müssen zwei nicht direkte Beziehungskomponenten über jeden Verbindungspunkt selbst kommunizieren. Der Mittelsmann muss einige Dinge, die er tut, kontinuierlich verarbeiten und übergeben Informationen müssen nicht bekannt sein (Abbildung 1 links). Der in Angular bereitgestellte Injectable Service kann in Modulen, Komponenten oder Anweisungen bereitgestellt werden und in Kombination mit der Injektion im Konstruktor dieses Problem lösen (rechts in Abbildung 1). [Empfohlene verwandte Tutorials: „Angular-Tutorial“]
Abbildung 1 Komponentenkommunikationsmodell
Das linke Bild überträgt Informationen nur über Eltern-Kind-Komponenten. Knoten a und Knoten b müssen zur Kommunikation viele Knoten durchlaufen. Wenn Knoten c Knoten b über eine bestimmte Konfiguration steuern möchte, müssen auch die Knoten zwischen ihnen festgelegt werden zusätzliche Attribute oder Ereignisse, um entsprechende Informationen transparent zu übermitteln. Der Knoten c im Abhängigkeitsinjektionsmodus im Bild rechts kann einen Dienst für die Kommunikation der Knoten a und b bereitstellen. Knoten a kommuniziert direkt mit dem von Knoten c bereitgestellten Dienst, und Knoten b kommuniziert auch direkt mit dem von Knoten c bereitgestellten Dienst. Schließlich wird die Kommunikation vereinfacht und der mittlere Knoten ist nicht an diesen Teil des Inhalts gekoppelt und hat kein offensichtliches Bewusstsein für die Kommunikation, die zwischen der oberen und der unteren Komponente stattfindet.
. Die Abhängigkeitsinjektion (DI) ist nicht nur für Angular verfügbar. Sie ist ein Mittel zur Implementierung des Entwurfsmusters der Inversion der Kontrolle (IOC). Das Aufkommen der Abhängigkeitsinjektion löst das Problem der manuellen Überkopplung Instanziierung und nicht alle Ressourcen können von beiden Parteien genutzt werden, anstatt von Ressourcenzentren oder Dritten bereitgestellt zu werden, die keine Ressourcen nutzen. Erstens macht die zentrale Ressourcenverwaltung die Ressourcen konfigurierbar und einfach zu verwalten. Zweitens verringert es den Grad der Abhängigkeit zwischen den beiden Parteien, die Ressourcen nutzen, was wir als Kopplung bezeichnen.
Eine Analogie zur realen Welt ist, dass wir beim Kauf eines Produkts wie eines Bleistifts nur ein Geschäft finden müssen, um ein bleistiftähnliches Produkt zu kaufen. Es ist uns egal, wo der Bleistift hergestellt wird oder wie das Holz und die Bleistiftmine hergestellt werden Wir benötigen es lediglich, um die Schreibfunktion eines Bleistifts zu erfüllen. Wir werden keinen Kontakt mit dem jeweiligen Bleistifthersteller oder der Fabrik haben. Das Geschäft kann Stifte über die entsprechenden Kanäle kaufen und die Konfigurierbarkeit von Ressourcen realisieren.
In Kombination mit dem Codierungsszenario müssen Benutzer insbesondere keine expliziten Instanzen (neue Vorgänge) erstellen, um Instanzen zu injizieren und zu verwenden. Die Erstellung von Instanzen wird von den Anbietern bestimmt. Da es sich nicht um den Anbieter oder die Erstellung von Instanzen handelt, kann der Benutzer einige lokale Injektionsmethoden (sekundäre Konfiguration von Token) verwenden, um schließlich den Instanzersetzungs- und Abhängigkeitsinjektionsmodus (AOP) zu erreichen ) ergänzen sich.
Die Abhängigkeitsinjektion ist eines der wichtigsten Kernmodule des Angular-Frameworks. Angular bietet nicht nur die Injektion von Diensttypen, sondern der Komponentenbaum selbst ist ein Injektionsabhängigkeitsbaum, und es können auch Funktionen und Werte injiziert werden. Das heißt, im Angular-Framework können untergeordnete Komponenten übergeordnete Komponenteninstanzen über das Token der übergeordneten Komponente (normalerweise den Klassennamen) injizieren. Bei der Entwicklung von Komponentenbibliotheken gibt es eine große Anzahl von Fällen, in denen Interaktion und Kommunikation durch das Einfügen übergeordneter Komponenten erreicht werden, einschließlich Parametermontage, Zustandsfreigabe und sogar des Abrufens des DOM des Knotens, auf dem sich die übergeordnete Komponente befindet usw.
Um Angular-Injection verwenden zu können, müssen Sie zunächst den Injektionsauflösungsprozess verstehen. Ähnlich wie beim Parsing-Prozess von node_modules werden, wenn keine Abhängigkeiten gefunden werden, die Abhängigkeiten immer zur übergeordneten Ebene weitergeleitet, um Abhängigkeiten zu finden. Die alte Version von Angular (vor v6) unterteilt den Injektionsanalyseprozess in mehrstufige Modulinjektoren, mehrstufige Komponenteninjektoren und Elementinjektoren. Die neue Version (nach v9) wird zu einem zweistufigen Modell vereinfacht. Die erste Abfragekette ist der statische Elementinjektor, Komponenteninjektor usw. auf DOM-Ebene, zusammenfassend als Elementinjektor bezeichnet, und die andere Abfragekette ist der Modulinjektor. Die Reihenfolge der Analyse und der Standardwert nach einem Analysefehler werden im offiziellen Codekommentardokument (provider_flag) ausführlicher erläutert.
Abbildung 2 Der Abhängigkeitssuchprozess des zweistufigen Injektors (Bildquelle)
bedeutet, dass Komponenten/Anweisungen und die Bereitstellung injizierter Inhalte auf der Komponenten-/Anweisungsebene zunächst nach Abhängigkeiten in den Elementen in der Komponentenansicht bis hin zum Stammelement suchen Wenn nicht gefunden, wird im Element „Das aktuelle Modul“ nach der Referenz (einschließlich Modulreferenz und Routing-Lazy-Loading-Referenz) des übergeordneten Moduls bis zum Root-Modul und Plattformmodul gesucht.
Beachten Sie, dass der Injektor hier über eine Vererbung verfügt. Der Elementinjektor kann die Suchfunktion des Injektors des übergeordneten Elements erstellen und erben, und der Modulinjektor ist ähnlich. Nach der kontinuierlichen Vererbung ähnelt es ein wenig der Prototypkette von js-Objekten.
verstehen die Reihenfolge der Abhängigkeitsauflösung und können Inhalte auf der entsprechenden Ebene bereitstellen. Wir wissen bereits, dass es zwei Arten gibt: Modulinjektion und Elementinjektion.
Modulinjektor: Anbieter können im Metadatenattribut von @NgModule konfiguriert werden, und Sie können auch die bereitgestellte @Injectable-Anweisung verwenden, nachdem v6 ProvideIn als Modulname, „root“ usw. deklariert wurde. (Eigentlich gibt es zwei Injektoren über dem Root-Modul, Platform und Null. Sie werden hier nicht besprochen.)
Elementinjektor: Anbieter, viewProviders können im Metadatenattribut der Komponente @Component oder im @ der Direktive konfiguriert werden
-
Dekorator zusätzlich zur Verwendung des deklarierten Modulinjektors auch als Elementinjektor deklariert werden. Häufiger wird es als im Stammverzeichnis bereitgestellt deklariert, um einen Singleton zu implementieren. Es integriert Metadaten über die Klasse selbst, um zu vermeiden, dass Module oder Komponenten den Anbieter direkt explizit deklarieren. Wenn die Klasse also keinen Komponentendirektivendienst und andere Klassen zum Einfügen hat, ist kein Code mit der Typdeklaration verknüpft Es kann vom Compiler ignoriert werden, wodurch Shake the Tree erreicht wird.
Eine andere Möglichkeit, dies bereitzustellen, besteht darin, den Wert direkt bei der Deklaration von InjectionToken anzugeben.
Hier sind die Kurzvorlagen für diese Methoden:
@NgModule({ Anbieter: [
//Modulinjektor]
})
Exportklasse MyModule {} @Component({ Anbieter: [
// Elementinjektor - Komponente],
viewProviders: [
//Elementinjektor – Komponentenansicht]
})
Exportklasse MyComponent {} @Directive({ Anbieter: [
// Elementinjektor - Direktive]
})
Exportklasse MyDirective {} @Injectable({
bereitgestelltIn: 'root'
})
export class MyService {} export const MY_INJECT_TOKEN = new InjectionToken<MyClass>('my-inject-token', {
bereitgestelltIn: 'root',
Fabrik: () => {
return new MyClass();
}
}); Verschiedene Optionen für die Bereitstellung von Abhängigkeitsspeicherorten bringen einige Unterschiede mit sich, die sich letztendlich auf die Größe des Pakets, den Umfang, in dem Abhängigkeiten eingefügt werden können, und den Lebenszyklus von Abhängigkeiten auswirken. Es gibt verschiedene anwendbare Lösungen für verschiedene Szenarien, z. B. Singleton (Root), Dienstisolation (Modul), mehrere Bearbeitungsfenster (Komponente) usw. Sie sollten einen angemessenen Speicherort wählen, um unangemessene gemeinsame Informationen oder redundante Codeverpackung zu vermeiden.
nur Instanzinjektion bereitstellen, zeigt dies nicht die Flexibilität der Abhängigkeitsinjektion des Angular-Frameworks. Angular bietet viele flexible Injektionstools, useValue verwendet statische Werte, useExisting kann vorhandene Instanzen wiederverwenden und useFactory wird über Funktionen mit angegebenen Deps und angegebenen Konstruktorparametern erstellt. Sie können das Token einer Klasse abschneiden und durch eine andere von Ihnen vorbereitete Instanz ersetzen. Sie können zuerst ein Token erstellen, um den Wert oder die Instanz zu speichern, und es dann erneut ersetzen, wenn Sie es später verwenden müssen Die Factory-Funktion gibt sie zurück. Die lokalen Informationen der Instanz werden einem anderen Objekt oder Attributwert zugeordnet. Das Gameplay hier wird anhand der folgenden Fälle erklärt, daher werde ich hier nicht näher darauf eingehen. Auf der offiziellen Website finden Sie auch viele Referenzbeispiele.
Die Injektion in Angular kann innerhalb des Konstruktors injiziert werden, oder Sie können den Injektor dazu bringen, vorhandene injizierte Elemente über die get-Methode abzurufen.
Angular unterstützt das Hinzufügen von Dekoratoren zum Markieren beim Injizieren,
gibt es einen Artikel „@Self oder @Optional @Host? Der visuelle Leitfaden für Angular DI-Dekoratoren, der sehr anschaulich zeigt, dass bei der Verwendung unterschiedlicher Dekoratoren zwischen übergeordneten und untergeordneten Komponenten letztendlich folgende Beispiele gefunden werden: Was für ein Unterschied.
Abbildung 3 Filterergebnisse verschiedener injizierter Dekoratoren
Unter den Host-Ansichts- und @Host-Dekoratoren ist @Host möglicherweise am schwierigsten zu verstehen. Hier sind einige spezifische Anweisungen für @Host. Die offizielle Erklärung des @Host-Dekorators lautet
: „Eine Abhängigkeit von jedem Injektor abrufen, bis das Host-Element erreicht ist
“, bedeutet, dass der @Host-Dekorator den Umfang der Abfrage auf das Host-Element beschränkt. Was ist ein Hostelement? Wenn Komponente B eine Komponente ist, die von der Vorlage von Komponente A verwendet wird, ist die Instanz von Komponente A das Hostelement der Instanz von Komponente B. Der von der Komponentenvorlage generierte Inhalt wird als Ansicht bezeichnet. Die gleiche Ansicht kann für verschiedene Komponenten unterschiedliche Ansichten sein. Wenn Komponente A Komponente B innerhalb ihres eigenen Vorlagenbereichs verwendet (siehe Abbildung 4), ist die durch den Vorlageninhalt von A gebildete Ansicht (roter Kastenteil) die eingebettete Ansicht von Komponente A, und Komponente B befindet sich innerhalb dieser Ansicht, also für B , diese Ansicht ist die Hostansicht von B. Der Dekorator @Host beschränkt den Suchbereich auf die Hostansicht. Wenn er nicht gefunden wird, wird er nicht angezeigt.
Abbildung 4 Eingebettete Ansicht und Hostansicht
Lassen Sie uns anhand realer Fälle sehen, wie die Abhängigkeitsinjektion funktioniert, wie Fehler behoben werden und wie man spielt.
Die modale Fensterkomponente der DevUI-Komponentenbibliothek stellt einen Dienst ModalService bereit, der ein modales Feld öffnen und als benutzerdefinierte Komponente konfigurieren kann. BWL-Studenten melden bei der Verwendung dieser Komponente häufig Fehler und sagen, dass das Paket die benutzerdefinierte Komponente nicht finden kann.
Beispielsweise wird der folgende Fehler gemeldet:
Abbildung 5 Bei der Verwendung von ModalService tritt beim Erstellen einer Komponente, die auf EditorX verweist, ein Fehler auf.
Analysieren Sie, wie ModalService die benutzerdefinierten Komponenten der Open-Funktion des ModalService-Quellcodes erstellt. Wie Sie sehen können, wird, wenn componentFactoryResolver nicht übergeben wird, componentFactoryResolver verwendet. In den meisten Fällen führt das Unternehmen DevUIModule einmal im Stammmodul ein, ModalModule jedoch nicht im aktuellen Modul. Das heißt, die aktuelle Situation in Abbildung 6 sieht so aus. Gemäß Abbildung 6 gibt es im Injektor von ModalService keinen EditorXModuleService.
Abbildung 6 Beziehungsdiagramm zur Bereitstellung von Moduldiensten
Gemäß der Vererbung des Injektors gibt es vier Lösungen:
Platzieren Sie EditorXModule dort, wo ModalModule deklariert ist, damit der Injektor den von EditorXModule bereitgestellten EditorModuleService finden kann. Dies ist die schlechteste Lösung selbst. Das verzögerte Laden wurde implementiert Durch LoadChildren soll das Laden des Homepage-Moduls reduziert werden. Das Ergebnis ist, dass der Inhalt, der auf der Unterseite verwendet werden muss, beim ersten Laden in das große Rich-Text-Modul geladen wird FMP (First Meaningful Paint).
Führen Sie ModalService in dem Modul ein, das EditorXModule einführt und ModalService verwendet – es ist ratsam. Es gibt nur eine Situation, die nicht ratsam ist: Der Aufruf von ModalService ist ein weiterer öffentlicher Dienst der obersten Ebene, der immer noch unnötige Module zum Laden auf die obere Ebene legt.
Wenn Sie die Komponente mit ModalService auslösen, fügen Sie componentFactoryResolver des aktuellen Moduls ein und übergeben Sie ihn an den offenen Funktionsparameter von ModalService. Es empfiehlt sich, EditorXModule dort einzuführen, wo es tatsächlich verwendet wird.
Im verwendeten Modul empfiehlt es sich, manuell einen ModalService bereitzustellen, der das Problem der injizierten Suche löst.
Die vier Methoden lösen tatsächlich das Problem von EditorXModuleService in der internen Kette des von ModalService verwendeten Injektors von componentFactoryResolver . Indem sichergestellt wird, dass die Suchkette auf zwei Ebenen erfolgt, kann dieses Problem gelöst werden.
Zusammenfassung der Wissenspunkte : Modulinjektorvererbung und Suchbereich.
wenn wir dieselbe Vorlage an mehreren Stellen verwenden. Wenn die DevUI Select-Komponente zuvor entwickelt wurde, wollte der Entwickler einen gemeinsamen Teil extrahieren Fehler.
Abbildung 7 Codeverschiebung und Injektionsfehler nicht gefunden.
Dies liegt daran, dass die CdkVirtualScrollFor-Anweisung einen CdkVirtualScrollViewport injizieren muss. Das Vererbungssystem für Elementinjektionen erbt jedoch das DOM der statischen AST-Beziehung Das folgende Abfrageverhalten tritt auf und die Suche schlägt fehl.
Abbildung 8: Suchbereich der Elementinjektor-Abfragekette
Endgültige Lösung: Entweder 1) Behalten Sie die ursprüngliche Codeposition bei, oder 2) Sie müssen die gesamte Vorlage einbetten, um sie zu finden.
Abbildung 9 Durch die Einbettung des gesamten Moduls kann CdkVitualScrollFo CdkVirtualScrollViewport finden (Lösung 2).
Zusammenfassung der Wissenspunkte : Die Abfragekette des Elementinjektors ist der DOM-Elementvorfahre der statischen Vorlage.
Dieser Fall stammt aus diesem Blog „Angular: Verschachteltes vorlagengesteuertes Formular“.
Das gleiche Problem trat auch bei der Verwendung der Formularvalidierung auf. Wie in Abbildung 10 dargestellt, kapseln wir aus bestimmten Gründen die Adressen der drei Felder zur Wiederverwendung in einer Komponente.
Abbildung 10: Kapseln Sie die drei Adressfelder des Formulars in eine Unterkomponente.
Zu diesem Zeitpunkt werden wir feststellen, dass ngModelGroup einen ControlContainer im Host benötigt, der den von der ngForm-Direktive bereitgestellten Inhalt darstellt.
Abbildung 11: ngModelGroup kann ControlContainer nicht finden.
Wenn Sie sich den ngModelGroup-Code ansehen, können Sie sehen, dass er nur die Einschränkung des Host-Dekorators hinzufügt.
Abbildung 12 ng_model_group.ts schränkt den Injektionsbereich von ControlContainer ein.
Hier können Sie viewProvider mit usingExisting verwenden, um den Provider von ControlContainer zur Hostansicht von AddressComponent hinzuzufügen.
Abbildung 13 Verwenden von viewProviders zur Bereitstellung externer Provider-
Wissenspunkte für verschachtelte Komponenten. Zusammenfassung der Wissenspunkte: Die wunderbare Verwendung von viewProvider und usingExisting.
verzögerten Ladens kein Singleton mehr, was dazu führt, dass die interne Geschäftsplattform aufgrund des verzögerten Ladens nicht mehr per Drag-and-Drop ausgeführt werden kann Beim Laden von LoadChildren wird jedes Modul verwendet. Das DragDropModule der DevUI-Komponentenbibliothek ist separat gepackt, und dieses Modul stellt einen DragDropService bereit. Drag-and-Drop-Anweisungen sind in Draggable-Anweisungen und Droppable-Anweisungen unterteilt. Die beiden Anweisungen kommunizieren über DragDropService. Ursprünglich war es möglich, durch Einführung desselben Moduls und Nutzung des vom Modul bereitgestellten Dienstes zu kommunizieren. Nach dem verzögerten Laden wurde das DragDropModule-Modul jedoch zweimal gepackt, was ebenfalls zu zwei isolierten Instanzen führte. Zu diesem Zeitpunkt kann die Draggable-Anweisung in einem verzögert geladenen Modul nicht mit der Droppable-Anweisung in einem anderen verzögert geladenen Modul kommunizieren, da es sich bei DragDropService zu diesem Zeitpunkt nicht um dieselbe Instanz handelt.
Abbildung 14: Das verzögerte Laden von Modulen führt dazu, dass Dienste nicht dieselbe Instanz/einziger Fall sind.
Es ist offensichtlich, dass wir hier einen Singleton benötigen, und die Methode von Singleton lautet normalerweise providerIn: 'root' ‘ der DragDropService der Komponentenbibliothek? Es ist gut, die Root-Domäne direkt auf Modulebene bereitzustellen. Aber wenn man genau darüber nachdenkt, gibt es hier noch andere Probleme. Die Komponentenbibliothek selbst wird für die Nutzung durch verschiedene Unternehmen bereitgestellt. Wenn einige Unternehmen zwei entsprechende Drag-and-Drop-Gruppen an zwei Stellen auf der Seite haben, möchten sie nicht verknüpft werden. Zu diesem Zeitpunkt zerstört der Singleton die natürliche Isolation basierend auf dem Modul.
Dann wäre es sinnvoller, den Singleton-Ersatz durch die Geschäftsseite zu implementieren. Denken Sie an die Abhängigkeitsabfragekette, die wir zuvor erwähnt haben. Der Elementinjektor wird zuerst durchsucht. Wenn er nicht gefunden wird, wird der Modulinjektor gestartet. Die Ersatzidee besteht also darin, dass wir Anbieter auf Elementebene bereitstellen können.
Abbildung 15 Verwenden Sie die Erweiterungsmethode, um einen neuen DragDropService abzurufen und ihn als auf der Stammebene bereitgestellt zu markieren
Abbildung 16 Sie können denselben Selektor verwenden, um wiederholte Anweisungen zu überlagern, der Draggable-Anweisung und der Droppable-Anweisung der Komponentenbibliothek eine zusätzliche Anweisung zu überlagern und das Token von DragDropService durch das DragDropGlobalService zu ersetzen, das einen Singleton im Stammverzeichnis bereitgestellt
hat In den Abbildungen 15 und 16 injizieren wir Elemente. Der Handler überlagert Anweisungen und ersetzt das DragDropService-Token durch eine Instanz unseres eigenen globalen Singletons. Zu diesem Zeitpunkt, an dem wir den globalen Singleton DragDropService verwenden müssen, müssen wir nur das Modul einführen, das diese beiden zusätzlichen Anweisungen deklariert und exportiert, damit die Draggable-Anweisung Droppable-Anweisung der Komponentenbibliothek über verzögert geladene Module hinweg kommunizieren kann.
Zusammenfassung der Wissenspunkte : Elementinjektoren haben eine höhere Priorität als Modulinjektoren.
Das Thema der DevUI-Komponentenbibliothek verwendet benutzerdefinierte CSS-Attribute (CSS-Variablen), um den CSS-Variablenwert von root zu deklarieren, um einen Theme-Wechsel zu erreichen . Wenn wir Vorschauen verschiedener Themen gleichzeitig in einer Schnittstelle anzeigen möchten, können wir CSS-Variablen lokal im DOM-Element neu deklarieren, um die Funktion lokaler Themen zu erreichen. Als ich zuvor einen Theme-Dither-Generator erstellt habe, habe ich diese Methode verwendet, um ein Theme lokal anzuwenden.
Abbildung 17: Lokale Designfunktion
. Es reicht jedoch nicht aus, CSS-Variablenwerte lokal anzuwenden. Es gibt einige Dropdown-Popup-Ebenen, die standardmäßig an der Rückseite des Körpers angebracht sind, was bedeutet, dass sich ihre Befestigungsebene außerhalb befindet die lokalen Variablen, was zu einem sehr peinlichen Problem führen wird. Das Dropdown-Feld der lokalen Theme-Komponente zeigt den Stil des externen Themes an.
Abbildung 18 Die Komponente im lokalen Design ist an das externe Overlay-Dropdown-Feld angehängt.
Was soll ich tun, wenn das Design falsch ist? Wir sollten den Befestigungspunkt zurück in den lokalen Theme-Dom verschieben.
Es ist bekannt, dass das Overlay der DatePickerPro-Komponente der DevUI-Komponentenbibliothek das Overlay von Angular CDK verwendet. Nach einer Analyserunde haben wir es wie folgt durch Injektion ersetzt:
1) Zuerst erben wir OverlayContainer und implementieren unseren eigenen ElementOverlayContainer wie gezeigt unten.
Abbildung 19 Passen Sie den ElementOverlayContainer an und ersetzen Sie die _createContainer-Logik.
2) Stellen Sie dann direkt unseren neuen ElementOverlayContainer auf der Komponentenseite der Vorschau bereit und stellen Sie ein neues Overlay bereit, damit das neue Overlay unseren OverlayContainer verwenden kann. Ursprünglich werden Overlay und OverlayContainer im Root bereitgestellt, hier müssen wir diese beiden abdecken.
Abbildung 20 Ersetzen Sie OverlayContainer durch einen benutzerdefinierten ElementOverlayContainer und stellen Sie ein neues Overlay bereit.
Gehen Sie nun zur Vorschau der Website und das DOM der Popup-Ebene wird erfolgreich an das Komponentenvorschauelement angehängt.
Abbildung 21 Der Overlay-Container von cdk ist an den angegebenen Dom angehängt. Die Vorschau des Teilthemas ist erfolgreich.
In der DevUI-Komponentenbibliothek gibt es auch einen benutzerdefinierten OverlayContainerRef, der ebenfalls entsprechend ersetzt werden muss. Schließlich können Popup-Ebenen und andere Popup-Ebenen realisiert werden, um lokale Themen perfekt zu unterstützen.
Zusammenfassung der Wissenspunkte : Ein gutes Abstraktionsmuster kann Module austauschbar machen und eine elegante Aspektprogrammierung erreichen.
mit dem letzten Fall umgegangen werden soll, möchte ich über einen weniger formalen Ansatz sprechen Um jedem das Verständnis für die Natur des Anbieters zu erleichtern, bedeutet die Konfiguration des Anbieters im Wesentlichen, dass er Ihnen bei der Instanziierung oder Zuordnung zu einer vorhandenen Instanz hilft.
Wir wissen, dass wir bei Verwendung von cdkOverlay die cdkScrollable-Anweisung zur Bildlaufleiste hinzufügen müssen, wenn wir möchten, dass das Popup-Fenster der Bildlaufleiste folgt und an der richtigen Position angehalten wird.
Es ist immer noch das gleiche Szenario wie im vorherigen Beispiel. Der Einfachheit halber habe ich die Bildlaufleiste auf den Host der Komponente geschrieben.
Abbildung 22: Die Inhaltsüberlauf-Bildlaufleiste schreibt overflow:auto in die Komponente:host.
Auf diese Weise stoßen wir auf ein schwierigeres Problem. Das Modul wird durch die Router-Definition angegeben, das heißt, <app-theme-picker-customize></app-theme-picker-customize> , wie füge ich dann die cdkScrollable-Anweisung hinzu? Die Lösung ist wie folgt. Ein Teil des Codes ist hier versteckt und nur der Kerncode bleibt übrig.
Abbildung 23 Erstellen Sie eine Instanz durch Injektion und rufen Sie den Lebenszyklus manuell auf.
Hier wird eine Instanz von cdkScrollable durch Injektion generiert und der Lebenszyklus wird synchron während der Lebenszyklusphase der Komponente aufgerufen.
Diese Lösung ist keine formale Methode, aber sie löst das Problem. Sie bleibt hier als Idee und Erkundung für den Leser.
Zusammenfassung der Wissenspunkte : Der Anbieter der Abhängigkeitsinjektionskonfiguration kann Instanzen erstellen. Beachten Sie jedoch, dass Instanzen als normale Serviceklassen behandelt werden und keinen vollständigen Lebenszyklus haben können.
finden Sie in diesem Blogbeitrag: „Rendern von Angular-Anwendungen im Terminal“.
Abbildung 24 Ersetzen Sie den RendererFactory2-Renderer und andere Inhalte, damit Angular auf dem Terminal ausgeführt werden kann.
Der Autor hat RendererFactory2 und andere Renderer ersetzt, damit die Angular-Anwendung auf dem Terminal ausgeführt werden kann. Das ist die Flexibilität des Angular-Designs. Sogar die Plattform ist leistungsstark und flexibel. Detaillierte Details zum Austausch finden Sie im Originalartikel und werden hier nicht näher erläutert.
Zusammenfassung der Wissenspunkte : Die Stärke der Abhängigkeitsinjektion besteht darin, dass der Anbieter sie selbst konfigurieren und schließlich die Ersetzungslogik implementieren kann.
In diesem Artikel wurde der Abhängigkeitsinjektionsmodus der Kontrollinversion und seine Vorteile vorgestellt. Außerdem wurde erläutert, wie die Abhängigkeitsinjektion in Angular nach Abhängigkeiten sucht, wie Anbieter konfiguriert werden, wie eingeschränkte und filternde Dekoratoren verwendet werden, um die gewünschte Instanz zu erhalten, und weiter durch N In den Fällen wird analysiert, wie die Wissenspunkte der Abhängigkeitsinjektion kombiniert werden können, um bei der Entwicklung und Programmierung auftretende Probleme zu lösen.
Wenn wir den Abhängigkeitssuchprozess richtig verstehen, können wir den Anbieter am genauen Standort konfigurieren (Fall 1 und 2), andere Instanzen durch Singletons ersetzen (Fall 4 und 5) und sogar über die Einschränkungen verschachtelter Komponentenpakete hinweg eine Verbindung herstellen () Fall 3) oder verwenden Sie die bereitgestellte Methodenkurve, um die Befehlsinstanziierung zu implementieren (Fall 6).
Fall 5 scheint ein einfacher Ersatz zu sein, aber um eine Codestruktur schreiben zu können, die ersetzt werden kann, sind ein tiefgreifendes Verständnis des Injektionsmodus und eine bessere und vernünftige Abstraktion jeder Funktion erforderlich Die maximale Wirkung der Injektion kann nicht genutzt werden. Der Injektionsmodus bietet mehr Platz für steckbare, steckbare und teilebasierte Module, wodurch die Kopplung reduziert und die Flexibilität erhöht wird, sodass Module eleganter und harmonischer zusammenarbeiten können.
Die leistungsstarke Abhängigkeitsinjektionsfunktion kann nicht nur die Kommunikationspfade der Komponenten optimieren, sondern, was noch wichtiger ist, auch eine Steuerungsumkehr erreichen, wodurch gekapselte Komponenten mehr Aspekten der Programmierung ausgesetzt werden und die Implementierung einiger geschäftsspezifischer Logiken flexibler werden kann.