javascript - 通过可观察量将数据从组件传递到服务

标签 javascript angular rxjs

我需要将信息从组件 A 发送到服务,在那里进行处理,然后将其发送到组件 B。A 和 B 是 sibling 。我需要组件 A 来触发此操作,以便在组件 B 上获得所需的结果。

我尝试使用 rxjs 的可观察量来实现此目的(我不知道这是否是最好的方法或实践)

目前我的组件 A 如下所示:

import { Observable } from "rxjs/Rx"
import { of, Subscription } from 'rxjs';
import { SoporteService    } from '../soporte/services/soporte.service';

public constructor( public _observable: Subscription, (...)

let observable = of (id_estado)
this._observable = observable.subscribe( (x:number) => {
} )

我能够按照一些指南将其结合在一起,尽管我根本不确定我应该如何接收服务上的数据,或者为什么我不使用 .next

当我保存前一个组件时,我得到

Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[Component A]

如何发送这样的数据?

最佳答案

使用当前代码,您尝试将可观察对象作为依赖项注入(inject)。相反,您应该将服务注入(inject)到组件 A 和 B 中,并在服务中提供组件 A 调用的方法以及组件 B 可以订阅的 ObservableEventEmitter

类似这样的东西;

中介服务

@Injectable({
    providedIn: 'root'
})
export class MyService {

    public eventEmitter: EventEmitter<any> = new EventEmitter<any>();

    public methodThatCompnentACanCall(someValue: string) {
        this.eventEmitter.emit(someValue);
    }
}

组件 A 和 B 的构造函数

公共(public)构造函数(私有(private)中介:MyService)

您可能需要搜索“中介模式”以获取更多信息。

关于javascript - 通过可观察量将数据从组件传递到服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58186623/

相关文章:

javascript - jQuery.extend(true, …) 的逆函数

angular - NgRx 测试 - 检查分派(dispatch) Action 的顺序

Angular2 rxjs http.request.catch 对某些 http 错误有奇怪的行为

javascript - Angular Directive(指令)不会出现

javascript - 为具有相同类的每个元素运行一个函数

javascript - PatchValue 或 setValue with formGroup 更多 formArray 和 formGroup

angular - 如何在包含异步逻辑的Angular Component中测试Observable不会发出

typescript - 找不到模块 'rxjs/subject/BehaviorSubject'

angular - 首次单击 Rxjs 时未将值发送到 Angular 中的其他组件

javascript - VueJS : Deleting dinamically rendered component in array with splice() method based on provided index, 不起作用