Angular2 - Component Injection außerhalb von NgModule

Question

Ich bin neu in A2, daher wurde diese Frage wahrscheinlich schon früher gestellt, aber ich verwende die falsche Terminologie, so kann ich die Antwort nicht finden.

Allerdings versuche ich die @Component Injektion in A2 zu verstehen. Wie man am besten kann ich sagen, alle Komponenten, egal wie verschachtelt sind sie immer deklariert werden als Teil der NgModules auf der Stammebene Datei (dh Dienste sind hier durch alle Komponenten zugänglich erklärt)

@NgModule({ 
    imports: [ 
     ... 
    ], 
    declarations: [ 
     1stComponent, 
     2ndComponent, 
     3rdComponent, 
     4thComponent  <-- All components must be included here 
    ], 
    providers: [ 
     ... 
    ], 
    bootstrap: [ 
     AppComponent 
    ] 
}) 

Für mich das scheint etwas komisch. Was ist, wenn Sie eine ChildComponent haben, die immer nur als Teil einer ParentComponent angezeigt wird? Warum muss die ChildComponent auf der Ebene NgModule deklariert werden? Kann diese ChildComponent nicht als Teil der übergeordneten Komponente deklariert werden, wenn sie benötigt wird? Stellt das Deklarieren aller Komponenten im Vordergrund keinen Overhead beim Laden der Anwendung dar - es muss alles nach vorne bringen? Oder ist es nur, dass NgModule definiert, was die Komponenten für den Build sind, nicht wann oder wie sie zur Laufzeit angezeigt werden?

Answer 1

In früheren Versionen von Angular funktionierte es so, wie Sie es erwartet hatten (d. H. Jede Komponente definierte ihre eigenen Abhängigkeiten). Ungefähr zu der Zeit, als RC veröffentlicht wurde, entschied sich das A2-Team dafür, es zu ändern.

Wie Estus erwähnt, können Sie Lazy loading verwenden. Es gibt eine gute Referenzanleitung here, die zeigt, wie es geht. (scrollen Sie nach unten zum 'Lazy Loading the Home-Modul' Sektion).

Grundsätzlich entschied sich das Angular-Team dafür, Ihre Anwendung in verschiedene Module zu segmentieren, wobei alle Komponenten-Abhängigkeiten auf der Modulebene definiert sind. Wenn Sie sich wirklich Sorgen machen, dass die Anfangslast zu hoch ist, brechen Sie die Dinge in verschiedene Module auf.

Auch als Antwort auf Ihre Frage, ja, indem Sie Ihre Komponenten im Deklarations-Array in app.module.ts definieren, werden Sie sie anschließend laden. (Da Sie sie in die Datei importieren müssen, um sie zuerst zu referenzieren).