Wie teilen Sie Komponenten in Modulen in Angular 2?

Question

Ich bin nicht sicher, wie man Komponenten in Modulen in Angular 2 teilen. Der Punkt ist: Ich habe zwei Module in der App, das 'Customers Module' und das 'Suppliers Module'.

Beide Module verwenden in ihren Komponenten AddressComponent und EmailComponent. Sie verwenden beide auch die Schnittstellen Adresse und E-Mail.

Jetzt habe ich derzeit viele Duplizierungen, weil ich diese Komponenten und Schnittstellen auf beiden Modulen kopiert und eingefügt habe. Das ist offensichtlich einfach nur falsch.

Ich brauche eine Möglichkeit, diese Komponenten zu importieren, die auf beiden Modulen verwendet werden. Aber ich habe keine Ahnung, wie es geht.

Sollte ich ein anderes Modul für diese freigegebenen Sachen erstellen und es in beiden importieren? Was ist der richtige Weg, um Komponenten in Modulen in Angular 2 zu teilen?

Answer 1

Erstellen Sie eine gemeinsame NgModule, die alle gemeinsamen Component/Service/Pipe haben wird. Dadurch vermeiden Sie Code-Duplizierung. Es macht den Code modularisierbar, steckbar & testbar.

Um AddressComponent & EmailComponent in anderen Modulen zu verwenden, müssen Sie sie aus dem gemeinsamen Modul export:

-Code

@NgModule({ 
    imports: [CommonModule], 
    declarations: [AddressComponent, EmailComponent], 
    providers: [MySharedService], 
    exports: [AddressComponent, EmailComponent], 
}) 
export class SharedModule() { } 

Während SharedModule Konsumieren, alles, was Sie tun müssen, ist der Import SharedModule

@NgModule({ 
    imports: [CommonModule, SharedModule, ... ], 
    providers: [..] 
}) 
export class CustomersModule() { }