如何从另一个角度组件激活一个组件中的 rxjs 订阅者？答案

【问题标题】：How to activate rxjs subscriber in one component from another angular component?如何从另一个角度组件激活一个组件中的 rxjs 订阅者？
【发布时间】：2019-06-22 11:11:17
【问题描述】：

componentA 有 myService getData observable 的订阅者。 componentB 有按钮。我希望按下此按钮后会出现下一个操作：

myService 将调用服务器并获取数据；
componentA 的订阅者将处理这些数据。

我尝试了以下代码：

(我的服务)

getData(): Observable<IData> {
    return this.http.get<IData>(apiUrl);
}

（组件A）

ngOnInit() {
    this.myService.getData().subscribe(response => console.log(response));
}

（组件B）

public onClick(): void {
    this.myService.getData();
}

当我按下 ComponentB 中的按钮时，ComponentA 中的订阅者什么也不做。在ComponentB中按下按钮后如何在ComponentA中激活订阅者？

【问题讨论】：

你应该定义两个组件的关系。
B 是 A 的孩子

标签： angular rxjs

【解决方案1】：

您尚未定义两个组件 A 和 B 的关系。而且我认为当在 B 中单击按钮时，您想在 A 中订阅服务。如果 B 是 A 的子项，那么您可以在子项中使用 EventEmitter 在按钮单击时发出事件，在父项中处理它，然后在该处理程序中订阅，但是那么你不能在 A 中订阅 ngOnInit 生命周期钩子（你只能在处理程序中订阅）。答：模板

<app-bcomponent (dataEmmiter)="handler($event)"><app-bcomponent>

A:Ts:

handler(e){
 this.myService.getData().subscribe(response => console.log(response));}

B：Ts

@Output
dataEmmiter: EventEmitter<any> = new EventEmitter<any>();

    getData(): Observable<IData> {
this.dataEmmiter.emit(anydata);
    return this.http.get<IData>(apiUrl).subscribe(data=>{
//Do what u want
});
}

【讨论】：

B 是 A 的孩子，好的，我现在正在尝试实现您提供的方法，如果成功我会尽快接受答案。
即使是现在，我仍然对您关于单击按钮时想要做什么的问题感到困惑。订阅或传递数据。
实际上我想订阅组件A中的数据，当按下组件B中的按钮时，现在我看到发射器可以在这种情况下帮助我。我认为 rxjs 更强大，并且有一些自己的“神奇”解决方案，但也许不是......

【解决方案2】：

问题是您在 onClick (comp B) 处理程序中创建了一个新的 observable 实例，它与在 ngOnInit (Comp A) 中创建的实例无关。

改为在您的服务中执行此操作：

public data$: Observable<IData>;

    constructor() {
        this.data$ = this.http.get<IData>(apiUrl).pipe(
           shareReplay(1)
        );
    }

在组件 B 中：

public onClick(): void {
    this.myService.data$.subscribe(
// Any code to execute when data is received
);
}

然后，无论您想在哪里访问获取的数据，都可以使用 myService.data$。 shareReplay 操作符将确保无论 data$ 订阅多少次，http fetch 操作都只会执行一次。

【讨论】：

【解决方案3】：

您可以在服务中设置发射器，当您按下组件 B 中的按钮时，发出数据并使用组件 a 中的订阅者从服务中订阅数据；

是这样的：

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

    getData(): Observable<IData> {
    return this.http.get<IData>(apiUrl).subscribe(data=>{
this.dataEmmiter.emit(data);
});
}

组件a

ngOnInit() {
    this.myService.getData().subscribe(response => console.log(response));
}

【讨论】：