typescript - Angular2: Pasando un objeto entre 2 componentes a través de un servicio

Estoy trabajando en una aplicación de Angular 2 beta9, estoy intentando hacer que dos componentes se comuniquen entre sí. Tengo un componente "start" que es un bloque con un botón de opción, donde el elemento seleccionado se transferiría como un objeto a través de un servicio al componente "destination", que usará este elemento seleccionado para filtrar los datos que utilizará.

el problema es que pasar el objeto desde el componente "start" al servicio funciona normalmente:

FormeService.ts:44 
Object {id: 1, submenu: "type1", nb: 102, value: "Porte Fenêtre", class: ""…}

pero, desde el servicio hasta el componente "destino" el objeto aparece como indefinido: undefined

este es mi código,

Iniciar componente :

@Component({
    selector: 'radioFormesType1',
    templateUrl: 'component1.html',
    styleUrls: ['component1.css'],

    directives: [MATERIAL_DIRECTIVES]



})
export class RadioFormesType1Component implements OnInit, OnDestroy{

    //valeur initiale du radio box
    data: any = {init: 'Fenêtre'};

    //liste parsèe du service
    items_list;


    constructor(public formeService: FormeService) {    }

    ngOnInit(){
        this.formeService.getjson().subscribe(people => this.items_list = people);
    }

    ngOnDestroy(){

    }

    public  onSelectType1(selected:any){
        console.log("valeur clickè "+selected.value);
        this.formeService.changeForme(selected);
        console.log("valeur selectionne passè au service"+selected.value);


    }

}

y la acción de hacer clic está aquí onSelectType1() :

<div *ngFor="#item of items_list">
            <md-radio-button
                    *ngIf="item.id===1"
                    value="{{item.value}}"
                    class="{{item.class}}"
                    checked="{{item.checked}}"
                    (click)="onSelectType1(item)">
                {{item.label}}
            </md-radio-button>
        </div>
    </md-radio-group>

El servicio adquiere este objeto y lo coloca en un nuevo objeto llamado "type1", este es el código de mi servicio que carga datos JSON por defecto:

import {Injectable,EventEmitter,Output} from 'angular2/core';
import {Http} from "angular2/http";
import 'rxjs/add/operator/map';


@Injectable()
export class FormeService{

    /*valeur selectionnèe du type1*/
    private _type1:any;


    get type1():any {
        return this._type1;
    }

    set type1(value:any) {
        this._type1 = value;
    }


    constructor (public http : Http){

        //this.changeForme(selected)
        this.http= http;

    }

    /*parsing  */
    getjson(){
        return this.http.get('dev/JsonData/formes.json')
            .map(res => res.json())
    }



    /*actions*/

    /*recuperer le type1 : fenetre Ou Porte Fentre*/
    public  changeForme(selected):any{
        console.log(selected);

        this._type1=selected
        console.log("valeur type1 du service forme contient  "+this._type1);


        return this._type1;

    }

y finalmente el "componente de destino" donde el objeto parece estar en este nivel indefinido cuando lo estoy poniendo en un nuevo objeto llamado type1Recu :

@Component({
    selector: 'checkboxFormesType2',
    templateUrl: 'component2.html',
    styleUrls: ['component2.css'],

    directives: [MATERIAL_DIRECTIVES,RadioFormesType1Component]
})
export  class CheckboxFormesType2 {

//liste parsèe du service
items_list;

// variable a en mettre le type1 selectionne
public  type1Recu: any;



constructor(public formeService: FormeService) {
    this.type1Recu = this.formeService.type1 ;
    console.log(this.formeService.type1)
    //console.log("type1Recu = " +this.type1Recu);

}

ngOnInit(){


    //chargement de la liste
    this.formeService.getjson().subscribe(people => this.items_list = people);
}

ngOnDestroy(){

}

¿Alguna sugerencia para poder cargar todo el objeto en el componente de destino?

Respuesta #1

No puedo decirlo con certeza sin tener el código donde utilizaste CheckboxFormesType2. Pero, parece que estás construyendo CheckboxFormesType2 antes de definir realmente type1, por ejemplo, antes de hacer clic en un radio checkbox. La solución obvia es agregar un atributo *ngIf=type1" a tu CheckboxFormesType2 así:

<checkboxFormesType2 *ngIf="type1"></checkboxFormesType2> 

De esta manera, CheckboxFormesType2 no se creará hasta que type1 esté definido.

Para la comunicación del servicio, creo que un mejor enfoque sería tener un sujeto en tu servicio. Para tu código, sería así:

FormeService :

import {Injectable,EventEmitter,Output} from 'angular2/core';
import {Http} from "angular2/http";
import 'rxjs/add/operator/map';
import {Subject} from 'rxjs/Rx';


@Injectable()
export class FormeService{
    public type1 = new Subject();
...
}

En RadioFormesType1Component:

export class RadioFormesType1Component implements OnInit, OnDestroy{
    ...
    public onSelectType1(selected:any){
        this.formeService.type1.next(selected);
    }
    ...
}

En CheckboxFormesType2:

export  class CheckboxFormesType2 {
    ...
    type1Recu:any;
    constructor(public formeService: FormeService) {
        this.formeService.type1.subscribe( type1 => this.type1Recu = type1);
    }
    ...
}