Gewusst wie: freigeben von Komponenten zwischen Modulen im Winkel 2?

Bin ich in Zweifel, wie gemeinsame Komponenten zwischen Modulen im Winkel 2. Der Punkt ist: ich habe zwei Module in der app, der "Kunden-Modul" und "Lieferanten-Modul'.

Diese beiden Module, in Ihre Komponenten, nutzen Sie die AddressComponent und die EmailComponent. Sie auch beide nutzen die Schnittstellen-Adresse und E-Mail.

Nun, derzeit habe ich viele überschneidungen, denn ich habe das kopiert und eingefügt, diese Komponenten und Schnittstellen beider Module. Dies ist offensichtlich einfach nur falsch.

Ich brauche einen Weg, um importieren Sie die Komponenten aus, die verwendet werden auf beide Module. Aber ich habe keine Idee, wie es zu tun.

Sollte ich ein anderes Modul für diese gemeinsame Sachen und importieren Sie es beide? Was ist der richtige Weg, um gemeinsame Komponenten zwischen Modulen im Winkel 2?

InformationsquelleAutor user1620696 | 2017-01-09
  1. 15

    Erstellen Sie einen freigegebenen NgModule haben alle gängigen Component/Service/Pipe. Dadurch vermeiden Sie code-Duplizierung. Es wird code Modularisieren, plug-Lage & getestet werden.

    Um AddressComponent & EmailComponent in anderen Modulen, die Sie benötigen, um export Sie aus dem gemeinsamen Modul:

    Code

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

    Während Verbrauchen SharedModule alle Sie tun müssen ist, importieren SharedModule

    @NgModule({
   imports: [CommonModule, SharedModule, ... ],
   providers: [..]
})
export class CustomersModule() { }
    • Ich glaube nicht, dass das funktioniert, können Sie nicht erklären-Komponenten gleich doppelt: stackoverflow.com/a/39927548/777285
    • vielen Dank für das heads-up, ich hatte entfernt redundante Erklärung, Danke 😉
    • Eigentlich ist es anders herum: SharedModule sollte die einzige sein, die Deklaration der Komponente(N). Und die Verbraucher müssen nur importieren SharedModule.
    • in oben genannten Fall werde ich importieren bestimmte Komponente aus SharedModule in welcher der Verbraucher-Modul, die ich brauchte..
    • Ich werde Bearbeiten, Ihre Antwort zu zeigen, was ich meine (per link zur Verfügung gestellt, und meine eigenen versuche), rollback, wenn Sie nicht einverstanden sind.
    • sicher, die Sache. Vielen Dank für Eure Gedanken 🙂
    • Lassen Sie uns weiter, diese Diskussion im chat.
    • Danke @PankajParkar, es funktioniert wie ein Charme!
    • Es funktioniert bei mir auch, aber weiß nicht, warum dieser Antwort noch nicht akzeptiert.

    InformationsquelleAutor Pankaj Parkar
  2. 1

    Wie share-Komponente, um mehrere Module in Angular2

    Hey Leute,

    In every application some times there were some views which are repeated in the whole application, and for that we have two option:

    Entweder wir wiederholen den gleichen code überall in allen Ansichten, in denen Sie verwendet werden.
    Oder wir erstellen eine gemeinsame Komponente, und teilen Sie es in jedem anderen Blick

    Wenn die Funktionalität der wiederholte Blick ist überall gleich dann die Wiederholung der code ist nicht empfehlenswert, meiner Meinung nach, die Erstellung einer gemeinsamen Komponente und die Anwendung, um alle anderen anzeigen/Modul ist eine tolle Idee, es reduziert den code-Redundanz und machen unsere Anwendung ordentlich und sauber, auch wenn etwas verändert wird, dann müssen Sie es ändern, nur in einer Komponente.

    Aber wie erreichen wir diese in Eckige 2-Anwendung?

    Da im Winkel 2, Folgen wir modulare design pattern, das heißt, wir halten verschiedene Ansichten in verschiedenen Modulen, aber die Frage ist, wie können wir gemeinsam eine einzelne Komponente verschiedene Module?

    Können wir nicht teilen eine Komponente verschiedene Module, die nur durch den Import, die Komponenten, die sich in allen Modulen, weil Eckig 2 wird uns nicht erlauben, einzelne Komponente verschiedene Module, wenn Sie versuchen dies zu tun, dann Eckige wirft einen Fehler:
    Typ X(Komponente) ist Teil der Erklärungen vom 2 Module

    Typ X(Komponente) ist Teil der Erklärungen vom 2 Module

    So, dieses problem zu lösen, erstellen wir in einem Gemeinsamen Modul anstelle des Teilens eine Komponente, jetzt teilen wir dieses Modul in alle weiteren Module für diese verwenden wir import-Anweisung, und importieren Sie das freigegebene Modul alle anderen Module nach dieser wird die Komponente erhält automatisch freigegeben wird, um alle Module.

    Unten ist das Beispiel, wie es zu tun:

    SharedModule

    @NgModule({
    Importe: [
    SomeModule
    ],
    Erklärungen: [
    SharedComponent
    ],
    Exporte: [
    SharedComponent
    ]
    })

    export-Klasse SharedMoule {}
    app.- Modul.ts

    import { SharedModule } from './shared/shared.Modul;

    @NgModule({
    Importe: [ SharedModule],
    ...
    })

    InformationsquelleAutor gnganpath
Schreibe einen Kommentar