[英]Angular 2 send data from component to service
我的目标是将数据从Angular组件发送到服务并使用服务方法来处理它。 例:
export class SomeComponent {
public data: Array<any> = MyData;
public constructor(private myService: MyService) {
this.myService.data = this.data;
}
}
和服务:
@Injectable()
export class TablePageService {
public data: Array<any>;
constructor() {
console.log(this.data);
// undefined
}
}
获取数据是不确定的。 如何使其工作?
如果服务和组件之间的交互可能是:
服务:
@Injectable()
export class MyService {
myMethod$: Observable<any>;
private myMethodSubject = new Subject<any>();
constructor() {
this.myMethod$ = this.myMethodSubject.asObservable();
}
myMethod(data) {
console.log(data); // I have data! Let's return it so subscribers can use it!
// we can do stuff with data if we want
this.myMethodSubject.next(data);
}
}
Component1(发件人):
export class SomeComponent {
public data: Array<any> = MyData;
public constructor(private myService: MyService) {
this.myService.myMethod(this.data);
}
}
Component2(接收器):
export class SomeComponent2 {
public data: Array<any> = MyData;
public constructor(private myService: MyService) {
this.myService.myMethod$.subscribe((data) => {
this.data = data; // And he have data here too!
}
);
}
}
说明:
MyService
正在管理data
。 如果需要,您仍然可以处理data
,但最好将其留给Component2
。
基本上MyService
从Component1
接收data
并将其发送给订阅myMethod()
方法的任何人。
Component1
正在向MyService
发送data
,这就是他所做的一切。 Component2
订阅了myMethod()
因此每次调用myMethod()
, Component2
都会监听并获取myMethod()
返回的内容。
@SrAxi的回复中的接收器组件存在一个小问题,因为它无法订阅服务数据。 考虑使用BehaviorSubject而不是Subject。 它对我有用!
private myMethodSubject = new BehaviorSubject<any>("");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.