Angular2 importieren und deklarieren globalen Service von Submodul

Question

Ich habe eine interessante Frage. Ich habe 2 Module. app.module.ts (AppModule) und listings.module.ts (ListingsModule). ListingsModule hat einen Service, nennen wir es Service A. Ein muss ein globaler Singleton-Service sein, was bedeutet, dass alle anderen Komponenten und Services in der Lage sein müssen, mit demselben zu interagieren.

Dafür habe ich zuerst versucht A als Provider in ListingsModule deklarieren, aber dies hat nicht wie erwartet funktioniert, da es nur als Singleton zur Verwendung für Komponenten und Dienste unter ListingsModule deklariert wurde, aber ich musste es auch unter anderen Modulen und unter AppModule verwenden. Ich kam daher zu dem Schluss, dass ich diesen Service aus ListingsModule exportieren und importieren und unter AppModule bereitstellen muss, aber das hat nicht wie erwartet funktioniert.

A ist ListingsStoreService.

Der folgende Code fordert mich auf, ListingsStoreService zu deklarieren oder zu importieren, damit es exportierbar ist. Wenn ich ListingsStoreService deklariere, gibt es mir einen weiteren Fehler. Ich kann anscheinend nur diesen Service anbieten.

Was ist der richtige Ansatz hier? Wie mache ich das?

Answer 1

haben Ihre ListingsStoreService in

imports: [ 
    SharedModule, 
    HeaderModule, 
    ListingsRoutingModule, 
    ListingsStoreService 
], 

importiert werden ich denke, das ist Ihr Problem. Kannst du das versuchen? Ich habe einen Kommentar geschrieben, aber ich brauche 50 Ruf dafür ... also hier ist eine Antwort, wo ich nicht 100% weiß, ob es funktioniert.

Answer 2

Es sollte ohne spezielle Konfiguration funktionieren. Dienste haben standardmäßig einen globalen Gültigkeitsbereich (, solange das Modul, für das sie deklariert sind, eifrig geladen wird). Ihre anfängliche Konfiguration (die Sie in Ihrer Frage beschrieben haben) sollte funktionieren.

Erklären Sie Ihren Dienst in den Anbietern von ListingsModule:

@NgModule({ 
    providers: [ ListingsStoreService ] 
}) 
export class ListingsModule { 
} 

Dann ListingsModule in AppModule importieren:

@NgModule({ 
    imports: [ ListingsModule ] 
}) 
export class AppModule { 
} 

NB. ListingsModule muss eifrig geladen werden, nicht faul geladen. Ihre Frage sagt nicht, wie ListingsModule in Ihrem Fall geladen ist.

Answer 3

Was ist mit einigen seiner Module (z. B. RouterModule) ist es möglich, die Schaffung von zwei Versionen des gleichen Moduls, über statische Funktionen namens "forRoot" und "forChild", durch Konvention. "forRoot" könnte einen globalen Dienst wie "ListingsStoreService" in seinem Provider-Array enthalten und "forChild" würde es weglassen. Dann könnten Sie "ListingsModule.forRoot()" im AppModule-Import-Array aufrufen und "ListingsModule.forChild()" überall dort aufrufen, wo Sie das "ListingsModule" benötigen.

@NgModule({ 
imports: [ 
    SharedModule, 
    HeaderModule, 
    ListingsRoutingModule 
], 
declarations: [ 
    ListingsComponent 
] 
}) 
export class ListingsModule { 
    static forRoot() : ModuleWithProviders { 
     return { 
      ngModule: ListingsModule, 
      providers: [ ListingsStoreService ] 
     };  
    }; 

    static forChild() : ModuleWithProviders { 
     return { 
      ngModule: ListingsModule, 
      providers: [] 
     }; 
    }; 
};