Angular 2：通过服务在两个组件之间传递一个对象

Question

我正在开发一个 angular 2 beta9 应用程序，我试图让组件相互处理，我有一个 "start " 组件，它是一个单选框按钮，其中所选项目将作为对象通过服务传输到 "destination" 组件，该组件将使用此所选项目来过滤它将使用的数据。

将对象从组件"start"传递给服务正常工作的问题：

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

但是，从服务到组件 "destination" 对象显示为未定义：undefined

这是我的代码，

开始组件：

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


    }

}

这里是点击的动作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>

服务获取此对象并将其放入名为 "type1" 的新对象中，这是我的服务代码，默认加载 json 数据：

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;

    }

最后 "destination component" 当我将它放入一个名为 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(){

}

关于能够在目标组件中加载整个对象的任何建议??

Answer 1

如果没有您使用的代码，我无法确定 CheckboxFormesType2。但是，您似乎在实际定义 type1 之前构造 CheckboxFormesType2，例如在单击单选框之前。显而易见的解决方案是向 CheckboxFormesType2 添加一个 *ngIf=type1" 属性，如下所示：

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

这样 CheckboxFormesType2 在定义 type1 之前不会创建。

对于服务通信，我认为更好的方法是在您的服务中使用 subject。对于您的代码，它将是这样的：

表单服务：

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

在 RadioFormesType1Component 中：

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

在 CheckboxFormesType2 中：

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

Angular 2：通过服务在两个组件之间传递一个对象

Angular2 :Passing an object betwen 2 component via service

typescript

angular2-directives

angular2-services

angular