Angular2:通过服务将数据从组件发送到组件
Angular2 :Sending data from a component to a component via service
我正在从一个组件中捕获数据,并试图通过服务将其发送到另一个组件
Component1(开始):单选框
查看
<md-radio-button
*ngIf="item.id===1"
value="{{item.value}}"
class="{{item.class}}"
checked="{{item.checked}}"
(click)="onSelectType1(item)"> //here i'm catching the value
{{item.label}}
</md-radio-button>
ts代码
public onSelectType1(selected:any){
this.formeService.type1Change(selected.nb)
}
服务:
@Injectable()
export class FormeService{
public type1S : any;
public type1Change(selected):any
{
this.type1S=selected; //here i'm catching it into the service
}
组件 2:(结束):简单视图
ts代码
export class ContentComponent{
constructor(public BackService : BackgroundService ,
public formeService: FormeService)
{
console.log(this.formeService.type1S)
////// that diplays me in the console that it's undefined !!!!!!!!!!!!!!!!!
The probleme is HERE : how may i access to the value of my variable in this part
}
!!!!!!!!!同时在视图中显示值:
{{formeService.type1S}} // this works normally
谁能告诉我如何在 "end component ts code" 中显示我的数据值?????
一个完整的例子Plunker
import {Injectable, Component, Directive} from 'angular2/core'
import { BehaviorSubject } from 'rxjs/subject/BehaviorSubject';
import 'rxjs/Rx';
@Injectable()
export class FormeService {
public type1S$:BehaviorSubject<number> = new BehaviorSubject<number>(null);
// when new values are set notify subscribers
set type1S(value:number) {
this.type1S$.next(value);
}
}
@Component({
selector: 'content-comp',
template: `
<div>{{value}}</div>
`})
export class ContentComponent {
value:number;
constructor(public formeService: FormeService) {
// subscribe to updates
this.formeService.type1S$.subscribe(val => {
this.value = val;
});
}
}
@Component({
selector: 'other-comp',
template: `
<button (click)="clickHandler()">count</button>
`})
export class OtherComponent {
counter:number = 0;
constructor(private formeService: FormeService) {}
// set new values
clickHandler() {
this.formeService.type1S = this.counter++;
}
}
@Component({
selector: 'my-app',
providers: [FormeService],
directives: [ContentComponent, OtherComponent]
template: `
<h2>Hello {{name}}</h2>
<content-comp></content-comp>
<other-comp></other-comp>
`
})
export class App {
}
我正在从一个组件中捕获数据,并试图通过服务将其发送到另一个组件
Component1(开始):单选框 查看
<md-radio-button
*ngIf="item.id===1"
value="{{item.value}}"
class="{{item.class}}"
checked="{{item.checked}}"
(click)="onSelectType1(item)"> //here i'm catching the value
{{item.label}}
</md-radio-button>
ts代码
public onSelectType1(selected:any){
this.formeService.type1Change(selected.nb)
}
服务:
@Injectable()
export class FormeService{
public type1S : any;
public type1Change(selected):any
{
this.type1S=selected; //here i'm catching it into the service
}
组件 2:(结束):简单视图
ts代码
export class ContentComponent{
constructor(public BackService : BackgroundService ,
public formeService: FormeService)
{
console.log(this.formeService.type1S)
////// that diplays me in the console that it's undefined !!!!!!!!!!!!!!!!!
The probleme is HERE : how may i access to the value of my variable in this part
}
!!!!!!!!!同时在视图中显示值:
{{formeService.type1S}} // this works normally
谁能告诉我如何在 "end component ts code" 中显示我的数据值?????
一个完整的例子Plunker
import {Injectable, Component, Directive} from 'angular2/core'
import { BehaviorSubject } from 'rxjs/subject/BehaviorSubject';
import 'rxjs/Rx';
@Injectable()
export class FormeService {
public type1S$:BehaviorSubject<number> = new BehaviorSubject<number>(null);
// when new values are set notify subscribers
set type1S(value:number) {
this.type1S$.next(value);
}
}
@Component({
selector: 'content-comp',
template: `
<div>{{value}}</div>
`})
export class ContentComponent {
value:number;
constructor(public formeService: FormeService) {
// subscribe to updates
this.formeService.type1S$.subscribe(val => {
this.value = val;
});
}
}
@Component({
selector: 'other-comp',
template: `
<button (click)="clickHandler()">count</button>
`})
export class OtherComponent {
counter:number = 0;
constructor(private formeService: FormeService) {}
// set new values
clickHandler() {
this.formeService.type1S = this.counter++;
}
}
@Component({
selector: 'my-app',
providers: [FormeService],
directives: [ContentComponent, OtherComponent]
template: `
<h2>Hello {{name}}</h2>
<content-comp></content-comp>
<other-comp></other-comp>
`
})
export class App {
}