Ich versuche Angular zu verstehen (manchmal auch Angular2 + genannt), dann bin ich auf Folgendes gestoßen @Module
:
Importe
Erklärungen
Anbieter
Nach Angular Quick Start
quelle
Ich versuche Angular zu verstehen (manchmal auch Angular2 + genannt), dann bin ich auf Folgendes gestoßen @Module
:
Importe
Erklärungen
Anbieter
Nach Angular Quick Start
Winkelkonzepte
imports
stellt die exportierten Deklarationen anderer Module im aktuellen Modul zur Verfügungdeclarations
sollen Anweisungen (einschließlich Komponenten und Rohre) aus dem aktuellen Modul anderen Anweisungen im aktuellen Modul zur Verfügung stellen. Selektoren von Direktiven, Komponenten oder Pipes werden nur dann mit dem HTML-Code abgeglichen, wenn sie deklariert oder importiert werden.providers
sollen DI Dienste und Werte bekannt machen (Abhängigkeitsinjektion). Sie werden dem Stammbereich hinzugefügt und anderen Diensten oder Anweisungen hinzugefügt, die sie als Abhängigkeit haben.Ein Sonderfall für providers
sind faul geladene Module, die einen eigenen Kinderinjektor bekommen. providers
eines faul geladenen Moduls werden standardmäßig nur für dieses faul geladene Modul bereitgestellt (nicht die gesamte Anwendung wie bei anderen Modulen).
Weitere Informationen zu Modulen finden Sie auch unter https://angular.io/docs/ts/latest/guide/ngmodule.html
exports
stellt die Komponenten, Anweisungen und Pipes in Modulen zur Verfügung, zu denen dieses Modul hinzugefügt wird imports
. exports
kann auch zum erneuten Exportieren von Modulen wie CommonModule und FormsModule verwendet werden, was häufig in gemeinsam genutzten Modulen erfolgt.
entryComponents
registriert Komponenten für die Offline-Kompilierung, damit sie mit verwendet werden können ViewContainerRef.createComponent()
. In Routerkonfigurationen verwendete Komponenten werden implizit hinzugefügt.
Import von TypeScript (ES2015)
import ... from 'foo/bar'
(die möglicherweise in ein aufgelöst werdenindex.ts
) sind für TypeScript-Importe. Sie benötigen diese, wenn Sie einen Bezeichner in einer Typoskriptdatei verwenden, die in einer anderen Typoskriptdatei deklariert ist.
Angulars @NgModule()
imports
und TypeScript import
sind völlig unterschiedliche Konzepte .
Siehe auch jDriven - TypeScript- und ES6-Importsyntax
Bei den meisten handelt es sich tatsächlich um eine einfache ECMAScript 2015 (ES6) -Modulsyntax, die auch von TypeScript verwendet wird.
forRoot()
in einem faul geladenen Modul zu verwenden. Sind Sie einverstanden? Siehe Das Kernmodul . Der Link zu # shared-module-for-root existiert nicht mehr.import
eine JS (ES2015) -Funktionalität ist, keine TypeScript- Funktionalität . :)imports
, aber Ihre deklarierbaren Elemente (Komponente, Direktive, Pipe) mit exportierenexports
. Die Hauptziele vonimports
undexports
sind also verschiedene Dinge. Stattdessen ist das Hauptziel vonexports
Ihnendeclarations
. Sie deklarieren Ihre Komponente durchdeclarations
, aber für dynamisch geladene Komponenten müssen Sie sie einfügenentryComponents
. In der Zwischenzeitproviders
werden die in einer anderen Geschichte von DI verwaltet.imports
werden zum Importieren unterstützender Module wie FormsModule, RouterModule, CommonModule oder eines anderen benutzerdefinierten Funktionsmoduls verwendet.declarations
werden verwendet, um Komponenten, Direktiven und Pipes zu deklarieren, die zum aktuellen Modul gehören. Jeder in Erklärungen kennt sich. Wenn wir beispielsweise eine Komponente haben, sagen wir UsernameComponent, die eine Liste der Benutzernamen anzeigt, und wir haben auch eine Pipe, sagen wir toupperPipe, die eine Zeichenfolge in eine Großbuchstabenzeichenfolge umwandelt. Wenn wir Benutzernamen in unserer UsernameComponent in Großbuchstaben anzeigen möchten, können wir die zuvor erstellte toupperPipe verwenden. Die Frage ist jedoch, wie UsernameComponent weiß, dass die toupperPipe vorhanden ist und wie sie darauf zugreifen und sie verwenden kann. Hier kommen die Deklarationen, wir können UsernameComponent und toupperPipe deklarieren.Providers
werden zum Einspeisen der Dienste verwendet, die für Komponenten, Anweisungen und Rohre im Modul erforderlich sind.quelle
Komponenten werden deklariert, Module importiert und Services bereitgestellt. Ein Beispiel, mit dem ich arbeite:
quelle
Winkelkonstrukte
@NgModule
:import { x } from 'y';
: Dies ist die Standard-Typoskript-Syntax (ES2015/ES6
Modulsyntax) zum Importieren von Code aus anderen Dateien. Dies ist nicht winkelspezifisch . Auch dies ist technisch gesehen nicht Teil des Moduls, es ist lediglich erforderlich, den benötigten Code im Rahmen dieser Datei abzurufen.imports: [FormsModule]
: Sie importieren hier andere Module. Zum Beispiel importieren wirFormsModule
im folgenden Beispiel. Jetzt können wir die Funktionalität nutzen, die das FormsModule in diesem Modul bietet.declarations: [OnlineHeaderComponent, ReCaptcha2Directive]
: Sie platzieren Ihre Komponenten, Anweisungen und Rohre hier. Einmal hier deklariert, können Sie sie jetzt im gesamten Modul verwenden. Zum Beispiel können wir jetzt dieOnlineHeaderComponent
in derAppComponent
Ansicht (HTML-Datei) verwenden. Angular weiß, wo dies zu finden ist,OnlineHeaderComponent
da es in der deklariert ist@NgModule
.providers: [RegisterService]
: Hier werden unsere Leistungen dieses spezifischen Moduls definiert. Sie können die Dienste in Ihren Komponenten verwenden, indem Sie die Abhängigkeitsinjektion injizieren.Beispielmodul:
quelle
Hinzufügen eines schnellen Spickzettel, der nach der langen Pause mit Angular hilfreich sein kann:
ERKLÄRUNGEN
Beispiel:
declarations: [AppComponent]
Was können wir hier injizieren? Komponenten, Rohre, Richtlinien
EINFUHREN
Beispiel:
imports: [BrowserModule, AppRoutingModule]
Was können wir hier injizieren? andere Module
ANBIETER
Beispiel:
providers: [UserService]
Was können wir hier injizieren? Dienstleistungen
BOOTSTRAP
Beispiel:
bootstrap: [AppComponent]
Was können wir hier injizieren? die Hauptkomponente, die von diesem Modul generiert wird (oberster übergeordneter Knoten für einen Komponentenbaum)
EINTRAGUNGSKOMPONENTEN
Beispiel:
entryComponents: [PopupComponent]
Was können wir hier injizieren? dynamisch generierte Komponenten (z. B. mithilfe von ViewContainerRef.createComponent ())
EXPORT
Beispiel:
export: [TextDirective, PopupComponent, BrowserModule]
Was können wir hier injizieren? Komponenten, Direktiven, Module oder Pipes, auf die wir in einem anderen Modul zugreifen möchten (nach dem Import dieses Moduls)
quelle
quelle