Angular2 - Daten zwischen Komponenten mithilfe von Diensten austauschen

Ich habe ein Objekt, das ich für meine Komponenten in einer Angular2-App freigeben 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 endlich mein kleiner Dienst, der 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 grid.component.ts wird das_configService.getConfig()ie Zeile @ gibt ein leeres Objekt zurück, das jedoch unmittelbar zuvor in der Datei app.component.ts gefüllt wurde.

Ich habe die Dokumentation und Tutorials gelesen, nichts hat funktioniert.

Was vermisse ich

Vielen Dan

Gelöst

Mein Problem war, dass ich meinen ConfigService zweimal injizierte. Im Bootstrap der Anwendung und in der Datei, in der ich sie verwende.

Ich habe das @ entferproviders Einstellung und es hat funktioniert!

Antworten auf die Frage(6)

Ihre Antwort auf die Frage