Question

我是角色2的新人。我正在为我的第一个项目工作。它是一个预算计算器，使用不同组件中的5个表单构建，并将摘要作为最后一个组件构建。我有一个问题要弄清楚如何创建共享服务并将数据从任何表单传递到汇总组件。如果您查看此plunker http://plnkr.co/edit/KOSmVSMSnEvtfH4gplBQ?p=preview的版本号14，我可以使用简单的工作版本。在相同的plunker版本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;

}`

这里是英雄课 `export class Hero { 姓名：号码; PROVA：数;

}`

摘要组件

`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

尝试使用Observable元素：
添加到服务＆＃34;从＆＃39; rxjs＆＃39;;＆＃34;导入{Observable}
将EventEmitter添加到组件中：＆＃34;从＆＃39; @ angular / core＆＃39;中导入{EventEmitter};

通过这种方式，您可以创建服务正在等待数据（可观察）的情况，并且表单会在您需要时通过$ emit函数发送它。

Answer 2

如果五个表单组件是隔离的并且不依赖于彼此的数据，则可以创建共享服务，其中从每个表单更新服务，并且摘要页面显示数据。

示例代码：

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。您可以根据自己的要求进行增强。

angular 2共享服务传递对象

2 个答案: