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

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

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.

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.

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 { }

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 { }

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)

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.