Angular 2
Module

Einführung

Ein einfaches Modul

Ein Modul ist eine Klasse mit dem @NgModule Dekorator. Um ein Modul zu erstellen, fügen wir @NgModule einigen Parametern hinzu:

• bootstrap : Die Komponente, die das Stammverzeichnis Ihrer Anwendung sein wird. Diese Konfiguration ist nur auf Ihrem Root-Modul vorhanden
• declarations : Ressourcen, die das Modul deklariert. Wenn Sie eine neue Komponente hinzufügen, müssen Sie die Deklarationen aktualisieren ( ng generate component führt dies automatisch durch).
• exports : Der Modulexport wird in anderen Modulen verwendet
• imports : Ressourcen, die das Modul aus anderen Modulen verwendet (nur Modulklassen werden akzeptiert)
• providers : Ressourcen, die in eine Komponente injiziert werden können

Ein einfaches Beispiel:

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
@NgModule({
  bootstrap: [AppComponent]
  declarations: [AppComponent],
  exports: [],
  imports: [BrowserModule],
  providers: [],
})
export class AppModule { }

Verschachteln von Modulen

Die Module können mit Hilfe der geschachtelt werden imports Parameter von @NgModule Dekorateur.

Wir können in unserer Anwendung ein core.module erstellen, das generische Dinge wie eine ReservePipe (eine Pipe, die eine Zeichenfolge ReservePipe ) enthält, und diese in diesem Modul bündeln:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReversePipe } from '../reverse.pipe';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [ReversePipe], // export things to be imported in another module
  declarations: [ReversePipe],
})
export class CoreModule { }

Dann in der app.module :

import { CoreModule } from 'app/core/core.module';

@NgModule({
  declarations: [...], // ReversePipe is available without declaring here
                       // because CoreModule exports it
  imports: [
    CoreModule,        // import things from CoreModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }