Angular2：通過服務在兩個組件之間傳遞對象

Question

我正在處理一個角度爲2的beta9應用程序，我試圖對組件進行交互處理，我有一個「開始」組件，它是一個無線電臺盒子按鈕，其中選定的項目將通過服務轉移爲「目標」組件，該組件將使用該選定項目過濾它將使用的數據。

，從組件「開始」傳遞對象到服務正常工作的問題：

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

但是，從服務到組件「目的地」的對象是出現未定義：undefined

THI是我的代碼，

啓動組件：

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

    } 

和finnally該對象似乎是在這個級別不確定的，當我把它命名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建議能夠加載目標組件中的整個對象？

Answer 1

我不能確定沒有代碼在哪裏使用CheckboxFormesType2。但是，似乎在實際定義type1之前，您正在構建CheckboxFormesType2，例如在點擊收音機複選框之前。顯而易見的解決方案是將*ngIf=type1"屬性添加到您的CheckboxFormesType2像這樣：

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

這樣CheckboxFormesType2將不會被創建，直到TYPE1定義。

對於服務溝通，我認爲更好的方法是在您的服務中使用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); 
    } 
    ... 
}