アングル2共有サービスの渡し方オブジェクト

Question

私はアンギュラ2で新しいです。私は最初のプロジェクトに取り組んでいます。これは、異なるコンポーネントで5つのフォームと最後のコンポーネントとしてサマリーで構築された予算の電卓です。 共有サービスを作成し、任意のフォームから要約コンポーネントにデータを渡す方法を理解するのに問題があります。 このplunkerのバージョン番号14を見ると、私が取り組んでいるものの簡単な作業バージョンがあります。http://plnkr.co/edit/KOSmVSMSnEvtfH4gplBQ?p=preview 同じ大胆なバージョン15では、達成しようとしているものを見つけることができます。誰かが助けることを願っています。 PageOneComponent

`import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 
import { Hero } from './hero'; 
import { DataService } from '../dataservice'; 

@Component({ 
    template: `<h3>Page One </h3> 
    <input [(ngModel)]="hero.name" type="number" /> 
    <select name="selectedPayFrequency" [(ngModel)]="selectedPayFrequency" 
    (ngModelChange)="onChange($event)"> 
    <option *ngFor="let p of payFrequencies" [ngValue]="p"> {{p.name}} </option> 
    </select> 
    <input [(ngModel)]="hero.prova" type="number" /> 
    <h1>{{newTotalIncome()}}</h1> 
    <br /> 
    `, 
}) 
export class PageOneComponent implements OnInit, OnDestroy { 
    hero: Hero = { 
    name: 0, 
    prova:0, 

    }; 

    constructor(public dataservice: DataService) {} 

    payFrequencies = [{'name': 'per Month','value':1}, {'name': 'per Year', 'value':1/12}]; 
    selectedPayFrequency = this.payFrequencies[0]; 
    onChange(payFrequency) { 
    return(payFrequency.value); 
    } 
    ngOnInit() { 

} 
    ngOnDestroy() { 

    this.dataservice.hero = this.hero; 
    } 

    newTotalIncome(){ 
    return ((this.hero.name* this.selectedPayFrequency.value)*this.hero.prova)} 
    }` 

私の大きな問題は、サービスを通じてselectedPayFrequencyを渡す方法を見つけることです。ここで ここにサービスコード

`import { Hero } from './hero'; 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class DataService { 
    public hero: Hero; 

}` 

とヒーロークラス `エクスポートクラスヒーロー{ 名：数; prova：number;

}` 

要約成分

`import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 
import { Hero } from './hero'; 
import { DataService } from '../dataservice'; 

@Component({ 
    template: `<h3>Page Two: Data taken from page one.</h3> 
    <span>{{newTotalIncome()}}</span> 
    <br />`, 
}) 
export class PageTwoComponent implements OnInit, OnDestroy { 
    hero: Hero; 

    constructor(public dataservice: DataService) {} 

    ngOnInit() { 

    this.hero = this.dataservice.hero; 
    } 

    ngOnDestroy() { 
    } 

}` 

Answer 1

は、その後、シェアードサービスは、サービスが各フォームとサマリーページがデータを表示から更新された場合に作成することができます。

サンプルコード：

export class Form1 { 

    fd; 
    input: any; 

    constructor(private appState: AppState){ 
    this.fd = this.appState.getData(); 
    } 

    save(val){ 
    this.fd.push({"form1" : val}); 
    this.appState.setData(this.fd); 
    } 

} 

サンプルサービス：

export class AppState { 

    public formData = []; 

    setData(value){ 
    this.formData = value; 
    } 

    getData(){ 
    return this.formData; 
    } 

} 

は簡単な作業demoです。要件に合わせて拡張することができます。

Answer 2

はObservable要素を使用してみてください：
がサービスに追加 "をインポート{観測} rxjs 'から;"
コンポーネントに持つEventEmitterを追加：「『角度/コア@』からインポート{持つEventEmitterを};

あなたはサービス（観測可能な）データを待っていると、フォームが$ EMITことによってそれを送信している状況を作成する方法を5つのフォームコンポーネントが分離され、互いのデータに依存していない場合は、必要なときに機能。