角2共享服务传递对象

问题描述：

我是角2的新角色。我正在开发我的第一个项目。这是一个预算计算器，用不同组件中的5个表单构建，并将摘要作为最后一个组件。我想知道如何创建共享服务并将数据从任何表单传递到摘要组件。如果你看看这个运动员http://plnkr.co/edit/KOSmVSMSnEvtfH4gplBQ?p=preview的版本号14，那么我的工作就有一个简单的工作版本。在同一个plunker版本15中，你可以找到我想要达到的目标。希望有人能帮忙。 PageOneComponent角2共享服务传递对象

`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() { 
    } 

}`

我找不到您共享的榨取器的版本15。请分享链接。此外，还有几种建立共享服务的方式。这取决于组件的相关性。我可以看看版本15后进入。 – Nehal

http://embed.plnkr.co/Oy3rv5wZE0JleNGwtn8a/非常感谢 – Sabina

答

如果这5个表格组件是孤立的，不依赖于对方的数据，然后共享服务可以创建，其中服务是从每个窗体和摘要页面显示的数据进行更新。

示例代码：

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。您可以加强它以适应您的要求。

感谢您的帮助。我的表单很复杂，但最终还是有效的。 – Sabina

答

尝试使用Observable元件：
添加到服务 “进口{可观察}从 'rxjs';”
添加EventEmitter到组件：“进口{EventEmitter}从‘@角/核心’;

这样，你创造一个服务正在等待数据（可观察）的情况和形式由$发出发送它功能，当您需要。

角2共享服务传递对象

相关推荐