CODEWITHSUNDEEP
typescriptangularangular2-directivesangular2-services
firasKoubaa
firasKoubaa

Reputation: 6867

Angular2 :Passing an object betwen 2 component via service

i'm working on an angular 2 beta9 app , i'm trying to make to components deals with each other , i have a "start " component which is a bloc a radio box button , where the selected item would be transfered as an object via a service to the "destination" component , that will use this selected item to filter the data which it would use.

the problem that passing the object from component "start" to the service works normally :

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

but , from the service to the component "destination" the object is appearing undefined : undefined

thi is my code,

Start component : 

@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);


    }

}

and the action of clicking is here 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>

The service acquire this object and places it in a new object named "type1" , this is the code of my service which is loading json data by default:

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;

    }

and finnally the "destination component" where the object seems to be in this level undefined when i'm putting it in a new object named 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(){

}

ANy suggestions to be able to load the whole object in the destination component ??

Upvotes: 2

Views: 1687

Answers (1)

Abdulrahman Alsoghayer
Abdulrahman Alsoghayer

Reputation: 16540

I can't tell for sure without having the code where you used CheckboxFormesType2. But, it seems that you are constructing CheckboxFormesType2 before actually defining type1, e.g. before clicking on a radio checkbox. The obvious solution is to add an *ngIf=type1" attribute to your CheckboxFormesType2 like so:

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

This way CheckboxFormesType2 will not be created until type1 is defined.

For the service communication, I think a better approach would be to have a subject in your service. For your code, it'll be like this:

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();
...
}

In RadioFormesType1Component: 

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

In CheckboxFormesType2: 

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

Upvotes: 1

Related Questions