Angular 2 从组件发送数据到服务

Question

我的目标是将数据从 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
    }
}

获取数据未定义。如何让它发挥作用？

Answer 1

如果服务和组件之间的交互可以是这样的示例：

服务：

@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);
    }
}

组件 2（接收器）：

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 将 data 发送到 MyService，这就是他所做的一切。 Component2 订阅了 myMethod()，所以每次 myMethod() 被调用时，Component2 将监听并获取 myMethod() 返回的任何内容。

Answer 2

@SrAxi 的回复中的接收器组件存在一个小问题，因为它无法订阅服务数据。考虑使用 BehaviorSubject 而不是 Subject。它对我有用！

private myMethodSubject = new BehaviorSubject<any>("");

Angular 2 从组件发送数据到服务

Angular 2 send data from component to service

javascript

typescript

angular-services

angular-components

angular