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

}`

來源

2017-07-16 Sabina

我找不到您共享的榨取器的版本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。您可以加強它以適應您的要求。

來源

2017-07-16 15:28:01 Nehal

感謝您的幫助。我的表單很複雜，但最終還是有效的。 – Sabina

嘗試使用Observable元件：
添加到服務「進口{可觀察}從 'rxjs';」
添加EventEmitter到組件：「進口{EventEmitter}從‘@角/核心’;

這樣，你創造一個服務正在等待數據（可觀察）的情況和形式由$發出發送它功能，當您需要。

來源

2017-07-16 13:49:39

角2共享服務傳遞對象

回答

相關問題