Was ist der Unterschied zwischen Deklarationen, Anbietern und Import in NgModule?

387

Ich versuche Angular zu verstehen (manchmal auch Angular2 + genannt), dann bin ich auf Folgendes gestoßen @Module:

  1. Importe

  2. Erklärungen

  3. Anbieter

Nach Angular Quick Start

Ramesh Papaganti
quelle

Antworten:

516

Winkelkonzepte

  • imports stellt die exportierten Deklarationen anderer Module im aktuellen Modul zur Verfügung
  • declarationssollen 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.
  • providerssollen 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 providerssind faul geladene Module, die einen eigenen Kinderinjektor bekommen. providerseines 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

  • exportsstellt die Komponenten, Anweisungen und Pipes in Modulen zur Verfügung, zu denen dieses Modul hinzugefügt wird imports. exportskann auch zum erneuten Exportieren von Modulen wie CommonModule und FormsModule verwendet werden, was häufig in gemeinsam genutzten Modulen erfolgt.

  • entryComponentsregistriert 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() importsund TypeScript importsind 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.

Günter Zöchbauer
quelle
1
Ich denke, aber ich bin mir nicht sicher, ob die neueste Empfehlung darin besteht, app-weite Anbieter in ein CoreModule zu integrieren, anstatt es forRoot()in einem faul geladenen Modul zu verwenden. Sind Sie einverstanden? Siehe Das Kernmodul . Der Link zu # shared-module-for-root existiert nicht mehr.
Mark Rajcok
1
Hervorragende Erklärung. Danke, @ günter-zöchbauer. Nur zu erwähnen ist, dass afaik importeine JS (ES2015) -Funktionalität ist, keine TypeScript- Funktionalität . :)
cassi.lup
und was ist Export [] in NgModule saugen wie Export: [MatCheckBox]
Omar Isaid
4
Um ehrlich zu sein, denke ich, dass das Design von NgModule of Angular im Vergleich zu Vue und React ungeschickt und undurchsichtig ist . Sie müssen ein anderes Modul mit importieren imports, aber Ihre deklarierbaren Elemente (Komponente, Direktive, Pipe) mit exportieren exports. Die Hauptziele von importsund exportssind also verschiedene Dinge. Stattdessen ist das Hauptziel von exportsIhnen declarations. Sie deklarieren Ihre Komponente durch declarations, aber für dynamisch geladene Komponenten müssen Sie sie einfügen entryComponents. In der Zwischenzeit providerswerden die in einer anderen Geschichte von DI verwaltet.
Xuemind
1
eine verschlungene Antwort, die einen verschlungenen Rahmen beschreibt
Donato
85

imports werden zum Importieren unterstützender Module wie FormsModule, RouterModule, CommonModule oder eines anderen benutzerdefinierten Funktionsmoduls verwendet.

declarationswerden 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.

Pate
quelle
3
"Deklarationen: werden verwendet, um Komponenten, Direktiven und Pipes zu deklarieren, die zum aktuellen Modul gehören. Alles in Deklarationen kennt sich." Dies sollte die akzeptierte Antwort sein
Deen John
60

Komponenten werden deklariert, Module importiert und Services bereitgestellt. Ein Beispiel, mit dem ich arbeite:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';    

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [ StateService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
SanSolo
quelle
3
Ich mag die Einfachheit dieser Erklärung, aber ich frage mich, warum es nicht nur eine "stuffsThisComponentNeeds" -Eigenschaft gibt. Es scheint, als hätten sie alle dasselbe zu tun, wodurch der aktuellen Komponente andere Codeteile zur Verfügung gestellt werden.
redOctober13
1
@ redOctober13 Ich stimme zu. In Node.js wird beispielsweise alles auf dieselbe Weise importiert, unabhängig davon, ob es sich um ein DB-Modell, ein Modul, einen Dienst oder ein installiertes Paket eines Drittanbieters handelt. Und ich denke, dasselbe passiert mit reactJS
SanSolo
18

Winkelkonstrukte @NgModule:

  1. import { x } from 'y';: Dies ist die Standard-Typoskript-Syntax ( ES2015/ES6Modulsyntax) 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.
  2. imports: [FormsModule]: Sie importieren hier andere Module. Zum Beispiel importieren wir FormsModuleim folgenden Beispiel. Jetzt können wir die Funktionalität nutzen, die das FormsModule in diesem Modul bietet.
  3. 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 die OnlineHeaderComponentin der AppComponentAnsicht (HTML-Datei) verwenden. Angular weiß, wo dies zu finden ist, OnlineHeaderComponentda es in der deklariert ist @NgModule.
  4. 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:

// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

// Components
import { AppComponent } from './app.component';
import { OfflineHeaderComponent } from './offline/offline-header/offline-header.component';
import { OnlineHeaderComponent } from './online/online-header/online-header.component';

// Services
import { RegisterService } from './services/register.service';

// Directives
import { ReCaptcha2Directive } from './directives/re-captcha2.directive';

@NgModule({
  declarations: [
    OfflineHeaderComponent,,
    OnlineHeaderComponent,
    ReCaptcha2Directive,
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [
    RegisterService,
  ],
  entryComponents: [
    ChangePasswordComponent,
    TestamentComponent,
    FriendsListComponent,
    TravelConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
Willem van der Veen
quelle
10

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)

Przemek Struciński
quelle
1
Was ist mit dem Export?
lugte098
@ lugte098 Ich habe Export in diese Liste hinzugefügt
Przemek Struciński
Ich liebe dieses Layout für die Erklärung, sehr verdaulich. Vielen Dank!
Aaron Jordan
1
  1. Deklarationen : Diese Eigenschaft gibt Auskunft über die Komponenten, Anweisungen und Pipes, die zu diesem Modul gehören.
  2. Exporte : Die Teilmenge der Deklarationen, die in den Komponentenvorlagen anderer NgModules sichtbar und verwendbar sein sollen.
  3. Importe : Andere Module, deren exportierte Klassen von in diesem NgModule deklarierten Komponentenvorlagen benötigt werden.
  4. Anbieter : Ersteller von Diensten, die dieses NgModule zur globalen Sammlung von Diensten beiträgt; Sie werden in allen Teilen der App zugänglich. (Sie können auch Anbieter auf Komponentenebene angeben, was häufig bevorzugt wird.)
  5. Bootstrap : Die Hauptanwendungsansicht, die als Stammkomponente bezeichnet wird und alle anderen Anwendungsansichten hostet. Nur das Root-NgModule sollte die Bootstrap-Eigenschaft festlegen.
Yogesh Waghmare
quelle