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

Posted 2023-03-13

【中文标题】Angular 2 将数据从组件发送到服务

【英文标题】：Angular 2 send data from component to service

【发布时间】：2017-10-19 09:33:43

【问题描述】：

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

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

【问题讨论】：

服务构造函数在您将其注入组件时已经运行 - 因为您没有初始化它，data 那时是未定义的。

在调用对象的方法之前，必须先构造它。因此，您的构造函数被调用并且数据未定义。然后访问成员并修改变量，但构造函数已经被调用。

我该如何解决这个问题？

我建议您使用方法在组件和服务之间进行通信。还可以使用订阅来确保您在可用时收到数据。在这里查看文档，非常有用：angular.io/docs/ts/latest/cookbook/…

这是 Typescript 而不是 javascript，或者？

【参考方案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);
    

组件 1（发送者）：

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

【讨论】：

component2 中的 MyData 来自哪里？

我刚刚从您的代码中获取了它：public data: Array<any> = MyData;。例如，它也可以声明为public data = ;，具体取决于您使用的数据类型。我只是想让它与您的示例保持一致，以便您更容易理解。

我可以设置两个参数吗？假设两个单独的字符串？我需要两个主题和两个 Observable 吗？

用同样的方法发送第二个参数。 w3schools.com/js/js_function_parameters.asp

@SrAxi，snap，我希望问题出在数据类型 xD 好吧，很高兴知道它可以是任何类型。谢谢你的回答！

【参考方案2】：

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

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

【讨论】：

BehaviorSubject 只是 Subject 的一个特化，它从数据流中获取最新值。问题可能不是您代码中Subject 的类型，可能问题与您订阅的时间有关。