Angular2 - Teilen von Daten zwischen Komponenten mit Diensten

Question

Ich habe ein Objekt, das ich zwischen meinen Komponenten in einer Angular2 App teilen möchte. Hier

ist die Quelle der ersten Komponente:

/* app.component.ts */ 

// ...imports 
import {ConfigService} from './config.service'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/templates/app.html', 
    directives: [Grid], 
    providers: [ConfigService] 
}) 
export class AppComponent { 
    public size: number; 
    public square: number; 

    constructor(_configService: ConfigService) { 
     this.size = 16; 
     this.square = Math.sqrt(this.size); 

     // Here I call the service to put my data 
     _configService.setOption('size', this.size); 
     _configService.setOption('square', this.square); 
    } 
} 

und die zweite Komponente:

/* grid.component.ts */ 

// ...imports 
import {ConfigService} from './config.service'; 

@Component({ 
    selector: 'grid', 
    templateUrl: 'app/templates/grid.html', 
    providers: [ConfigService] 
}) 
export class Grid { 
    public config; 
    public header = []; 

    constructor(_configService: ConfigService) { 
     // issue is here, the _configService.getConfig() get an empty object 
     // but I had filled it just before 
     this.config = _configService.getConfig(); 
    } 
    } 

und schließlich mein kleiner Service, die ConfigService:

/* config.service.ts */ 

import {Injectable} from 'angular2/core'; 

@Injectable() 
export class ConfigService { 

    private config = {}; 

    setOption(option, value) { 
     this.config[option] = value; 
    } 

    getConfig() { 
     return this.config; 
    } 
} 

Meine Daten werden nicht geteilt, in der grid.component.ts gibt die _configService.getConfig() Zeile ein leeres Objekt zurück, bu t es ist gerade zuvor in der app.component.ts gefüllt.

Ich las die Dokumente und Tutorials, nichts hat funktioniert.

Was fehlt mir?

Dank

GELÖST

Mein Problem war, dass ich zweimal mein ConfigService wurde injiziert wird. Im Bootstrap der Anwendung und in der Datei, in der ich sie verwende.

Ich habe die providers Einstellung entfernt und es hat funktioniert!

Answer 1

Sie definieren es innerhalb Ihrer zwei Komponenten. Daher wird der Dienst nicht geteilt. Sie haben eine Instanz für die Komponente AppComponent und eine weitere für die Komponente Grid.

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/templates/app.html', 
    directives: [Grid], 
    providers: [ConfigService] 
}) 
export class AppComponent { 
    (...) 
} 

Die schnelle Lösung ist es, das providers Attribut auf Ihre Grid-Komponente ... Auf diese Weise der Dienstinstanz durch die AppComponent und seine Kinder Komponenten gemeinsam genutzt werden zu entfernen. Die andere Lösung besteht darin, den entsprechenden Provider innerhalb der bootstrap-Funktion zu registrieren. In diesem Fall wird die Instanz von der gesamten Anwendung geteilt.

bootstrap(AppComponent, [ ConfigService ]); 

Um zu verstehen, warum Sie tun müssen, dass Sie sich der „hierarchischen Injektoren“ -Funktion von Angular2 sein müssen. Folgende Links könnten nützlich sein:

• What's the best way to inject one service into another in angular 2 (Beta)?
• https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

Answer 2

nicht ConfigService zu providers Ihrer Komponente hinzufügen Sie. Dies führt zu neuen Instanzen für jede Komponente. Fügen Sie es zu providers einer gemeinsamen übergeordneten Komponente hinzu. Wenn Sie es zu Ihrer Root-Komponente hinzufügen oder bootstrap(App, [ConfigService]), teilt Ihre gesamte Anwendung eine einzige Instanz.

Answer 3

Wenn Sie den Dienst für die neueste Version von eckig freigeben möchten, können Sie ihn nicht zur Bootstrap-Funktion hinzufügen. Fügen Sie es einfach wie bei einem normalen Dienst der NgModule-Anbieterliste hinzu. Das Standardverhalten ist Singleton.

bootstrap (AppComponent);

@NgModule({ 
    declarations: [ 
     .... 
    ], 
    imports: [ 
     ....  
    ], 
    providers: [ 
     ConfigService, 
....