我是角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