2016-09-02 5 views
7

In Angular 1 habe ich häufig verwendet Fabriken für Dienste zum Speichern freigegebenen Zustand von vielen Komponenten zugänglich. Es sieht so aus, als ob in Angular 2 alle Dienste, die als @Injectable() injiziert werden, jedes Mal erstellt werden, wodurch der gemeinsame Status verloren geht.Angular 2 - Singleton-Dienste?

Ich 'registrieren' den Dienst am providers10 Metastamm des Hauptmoduls, aber ich bekomme immer noch eine vorübergehende Instanz.

Was ich habe:

Injectable() 
export class ArtistService { 
    constructor(private http:Http) { 
    // firing on each injection 
    console.log("ArtistService ctor"); 
    } 

} 

es in einer Komponente rufen dann:

@Component({ 
    selector: 'artist-display', 
    templateUrl: './artistDisplay.html', 
}) 
export class ArtistDisplay { 
    constructor(private artistService: ArtistService) { 
      // instance is fine but transient 
    } 
} 

und die Definition des Moduls:

@NgModule({ 
    declarations: [...], 
    imports: [BrowserModule, FormsModule, HttpModule, 
    RouterModule.forRoot(rootRouterConfig)], 
    providers : [ 
     ArtistService, 

     // make sure you use this for Hash Urls rather than HTML 5 routing 
     { provide: LocationStrategy, useClass: HashLocationStrategy }, 
    ], 
    bootstrap: [AppComponent] 
}) 

ich vermute, es ist vielleicht einige andere Möglichkeit, die ArtistService zu "registrieren", so bleibt es als statische Instanz geladen? Ist das über DI möglich oder muss eine statische Instanzmethode manuell angelegt werden?

Update:
Es stellte sich heraus, dass der obige Code funktioniert. Ich suchte an der falschen Stelle zusammen mit einem logischen Fehler, der dazu führte, dass Daten nicht korrekt zwischengespeichert wurden.

Der obige Code funktioniert und den Dienst in der providers Abschnitt der obersten Ebene AppModule Zuordnung ist der Schlüssel für die übergeordnete Referenz Aufenthalt für die Dauer des AppComponent geladen machen. die für die gesamte Lebensdauer der App geladen bleibt und die Singleton Instanz enthält.

Um eine transienten Instanz erhalten Sie den providers Meta-Tag und die Dienstnamen auf dem tatsächlichen Komponente erklären können, die dann den Dienst erstellen, wann immer die Komponente/neu geladen geladen wird.

Antwort

3

Was Sie gezeigt haben, ist ein korrekter Weg. Es erstellt eine einzelne Instanz, die von Komponenten gemeinsam genutzt wird.

https://plnkr.co/edit/FBCa39YC4ZPoy6y8OZQl?p=preview zu Referenzzwecken.

+6

Hmmm ... es funktioniert nicht für mich. Der Service-Konstruktor wird bei jeder Injektion in die 'ArtistDisplayComponent'-Datei ausgelöst. –

+0

Ich habe einen funktionierenden Link hinzugefügt, der den geteilten Dienst anzeigt. – micronyks

+0

Ok, überprüfe ich und es funktioniert tatsächlich. Bedienungsfehler meinerseits - ich habe mir die falsche console.log() angesehen :-) –

3

Ich möchte auch ein Objekt für die Verwendung als Anbieter in angular2 erstellen, also habe ich einen @injector erstellt. aber wenn wir Anbieter in jeder @ Komponente setzen und importieren, dann verwendet jede Komponente ein anderes Objekt des Injektors. zum Erstellen von Singleton-Provider, habe ich diesen Anbieter in der übergeordneten Komponente deklariert und importieren Sie es in jedem, jetzt funktioniert es gut. https://angular.io/guide/dependency-injection

+2

Hinweis: Ich habe deine Antwort dreimal gelesen und bin immer noch nicht sicher, was du versuchst kommunizieren. Wenn Englisch nicht Ihre Muttersprache ist: Kurzes Thema Verb Objekt sentences. Konzentriere dich darauf, lesbaren Text zu schreiben! – GhostCat

1

Ok lass mich versuchen zu erklären, wie Dienste funktionieren nach meiner Erfahrung und im Grunde um die Dokumentation.

Es gibt drei Hauptszenarien:

  • Der Service in Provider-Array auf Komponentenebene enthalten ist - kann der Dienst in der Eltern und alle Kinder injiziert werden.

  • Der Dienst ist im Provider-Array auf Modulebene enthalten - alles, was in diesem Modul ist, kennt den Dienst. Der Dienst ist im Provider - Array auf Modulebene enthalten - alles, was in diesem Modul ist, kennt den Dienst, aber wenn Sie die Komponente aus diesem Modul in einer anderen Komponente eines anderen Moduls verwenden, die das erste Modul importiert, dann die Instanz des Service für diese Komponente wird anders sein.

+0

Sie sparen mich! Ich habe component1 nicht den Dienst injiziert und die Komponente2 ist der Dienst injiziert. und ich bekomme das Singleton erst, nachdem ich den Dienst vom Component2-Provider entfernt habe. danken!!! – praHoc

1

A Singleton Dienst wird nur in app.module.ts "Provider" (Array)

und es in jedem anderen Komponente oder Service-Provider (Array) werden soll nicht gesetzt gehalten werden.

wenn dies richtig, dann 2 Winkel erfolgt - 2.4.0 - Singleton funktioniert perfekt