Question

我试图将Javascript对象作为Observable传递给同级组件。为此，我创建了一个服务pass.service.ts，其中包含如下所示的变量声明：

public passedData:any

this.fb.user$.subscribe(data => {
    this.passservice.passedData = of(data);
})

这样做，我可以在其他组件中订阅可观察的对象。我正在使用以下方法检索其他组件中的数据：

this.passservice.passedData.subscribe(data => {
    this.data = data
})

尽管data发生了更改，但我没有任何新的更新。

该行为与我使用Observable.first()

进行订阅的行为相同

我想念什么？

Answer 1

使用主题更有意义，或者，如果您正在使用依赖项注入，则可以将this.fb注入到您的服务中

this.passservice.passedData=new Subject()
this.fb.user$.subscribe(this.passservice.passedData)

Answer 2

您需要使用Subject（主题也是可观察对象）。 import { Subject } from 'rxjs';

服务

在您的服务中创建一个主题。您的组件将使用此主题共享数据。

public passedData = new Subject<any>();

组件1

通过调用next将新数据传递给主题。

this.passService.passedData.next(data);

要将包括error和complete个事件的所有事件从一个“可观察”事件传递给一个主题，您可以执行以下操作：this.fb.user$.subscribe(this.passService.passedData); 但这意味着this.passService.passedData仅镜像this.fb.user$，您也可以直接使用this.fb.user$。

组件2

通过订阅获得有关主题的新数据的通知。

this.passService.passedData.subscribe(data => this.data = data);

Answer 3

您可以这样在服务中定义属性：

user$ = this.fb.user$;

然后，您可以在需要它的任何组件中订阅它。

但是实际上您似乎已经拥有了具有user $属性的另一项服务（fb？）？如果是这样，您可以在需要它的每个组件中订阅该user $属性。

您还可以通过shareReplay(1)通过管道将其与所有订户共享结果：

user$ = this.fb.user$.pipe(shareReplay(1));

我在此处整理了一个将流传递到子组件的示例：

https://stackblitz.com/edit/angular-todos-deborahk-child

将可观察的传递给RXJS中的同级组件

3 个答案: