Question

我正在开发一个有角度的2 beta9应用程序，我正在努力使组件相互交易，我有一个“开始”组件，这是一个单元格的单选按钮，所选项目将被转移作为对象通过“目的地”组件的服务，将使用此选定项目来过滤它将使用的数据。

将对象从组件“start”传递到服务的问题正常：

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

但是，从服务到组件“destination”，对象显示为undefined：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;

    }

并且当我将它放在名为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，例如在点击收音机复选框之前。显而易见的解决方案是向*ngIf=type1"添加CheckboxFormesType2属性，如下所示：

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

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

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

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

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

Angular2：通过服务

1 个答案: