Angular 2 Lazy Module und geteilte Module Singleton

Question

Ich lerne angular2 Lazy Laden und gemeinsame Abhängigkeiten mit this Artikel. Ich habe verstanden, dass das Lazy-Modul eine separate Abhängigkeitsstruktur hat und es nicht die gleiche Instanz des Dienstes mit dem Eager-Modul teilt.

Als ich den SharedModule-Import aus dem Import-Abschnitt des Lazy-Moduls entfernte, änderte sich das Verhalten und ich bekam einen Singleton-Dienst zwischen Eager- und Lazy-Modulen.

Wie in der Dokumentation zur Wiederverwendung desselben Shared-Service beschrieben, gibt es mehr zu tun, wie in this Artikel beschrieben. Aber ich könnte es funktionieren lassen, indem ich den Import von der freigegebenen Moduldefinition lösche. Kann jemand

hier, um dieses Verhalten erklären ist der plnkr

@NgModule({ 
    imports: [ 
    //SharedModule //This is removed 
    routing 
    ], 
    declarations: [LazyComponent] 
}) 

Answer 1

Lazy Loading einen separaten Abhängigkeitsbaum nicht schaffen - zumindest nicht in der Art und Weise sind Sie beschreiben.

Wie Sie wahrscheinlich wissen, ist Angulars Abhängigkeitsinjektionssystem tatsächlich ein Injektorbaum - einer für jede Komponente in der Ansichtshierarchie. Wenn Sie eine Abhängigkeit anfordern, durchläuft Angular diesen Injektor-Baum, beginnend bei der Komponente, die die Abhängigkeit anfordert, bis sie den ersten Injektor findet, der diese Abhängigkeit bereitstellen kann. Dies gibt Ihnen viel Macht, wenn Sie es brauchen, da Sie auf jeder Ebene des Komponentenbaums einen Provider für eine Abhängigkeit von der Komponente angeben können und diese Komponente eine eigene Instanz dieser Abhängigkeit erhalten kann. Darüber hinaus teilen alle untergeordneten Elemente dieser Komponente dieselbe Instanz der Abhängigkeit.

Das ist die grundlegende Übersicht darüber, wie die hierarchische Abhängigkeitsinjektion in Bezug auf Komponenten funktioniert. Wenn es um Module geht, sind die Dinge ein bisschen anders. Standardmäßig werden Abhängigkeiten, die von einem NgModule bereitgestellt werden, dem Root-Injektor hinzugefügt, was bedeutet, dass eine einzelne Instanz dieser Abhängigkeit von der gesamten Anwendung gemeinsam genutzt wird. Die Ausnahme ist, wenn das NgModule Lazy geladen ist. In diesem Fall werden die vom lazy-loaded-Modul bereitgestellten Abhängigkeiten nicht zum Root-Injektor hinzugefügt. Stattdessen werden diese Abhängigkeiten zur Root-Komponente des Lazy-Loaded-Moduls hinzugefügt (ich lernte dies auf die harte Tour - wenn Sie mehrere 'Root-Komponenten' Ihres Lazy-Loaded-Moduls haben, erhält jede 'Root-Komponente' ihre eigene Instanz des Abhängigkeit).

So ist es immer noch die gleiche grundlegende Hierarchie - es ist nur, dass eifrig geladene Module ihre Abhängigkeiten zum Root-Injektor hinzufügen, während Lazy geladene Module fügen sie ihre Root-Komponente ihres Moduls hinzu. Wenn ein Lazy-geladenes Modul ein NgModule importiert, das auch Abhängigkeiten bereitstellt (z. B. für Ihr SharedModule), werden diese Abhängigkeiten ebenfalls dieser Root-Komponente des Moduls hinzugefügt. (Beachten Sie, dass, wenn SharedModule auch mit Eager geladen wird, seine Abhängigkeiten ebenfalls zum Root-Injektor hinzugefügt werden - was dazu führt, dass mehrere Instanzen dieser Abhängigkeiten verfügbar sind).

Dieser letzte Punkt ist, warum Sie das Verhalten sehen, das Sie sehen. Wenn Ihr Lazy-Modul SharedModule importiert, werden von SharedModules bereitgestellte Abhängigkeiten zur Stammkomponente des Lazy-Moduls hinzugefügt, was zu doppelten Instanzen dieser Abhängigkeiten führt.