Angular语言 - 如何在一个组件中触发GET请求，并将结果注入另一个组件

Question

考虑两个独立的Angular组件:

表

2. 一个卡片，包含一个表单

当单击表的一行时，我想发送一个GET请求到一个REST API请求数据，我想在我的表单中显示。

为此，我用以下重要方法实现了一个FormCrudService:

getFormDetails(id: number): Observable<FormDetails>{
return this.httpClient.get<FormDetails>(this.URL + '/' + id);
}

这个方法正在发送GET请求来检索我想在表单中显示的数据。但是，该方法需要一个id作为参数。这个id等于我单击以触发GET请求的表的行索引。我的想法是将FormCrudService注入到card-component中，这样我就可以在card-component中发送GET请求。但是，我仍然需要找到一种方法来通知card-component我单击了哪一行。由于我不知道更好的方法，我创建了另一个服务，SelectRowService:

private selectedRow = new Subject<number>();
selectedRow$ = this.selectedRow.asObservable();
updateSelectedRow(id: number) {
this.selectedRow.next(id);
}

我已经将这个服务注入到我的表组件中，并向我的表-rows添加了一个单击侦听器，这样当单击一行时，就会调用updateSelectedRow(id)方法。在card-component中，我注入了相同的服务并订阅了selectedRow$:

constructor(private formCrudService: FormCrudService, private selectRowService: SelectRowService) {
this.selectRowService.selectedRow$.subscribe(id=> this.formCrudService.getFormDetails(id).subscribe(details => this.details= details));
}

现在，理论上这并不太坏。然而，对于这个解决方案，我有两个问题:

1. 我必须在表行上单击两次才能显示
我真的不喜欢为这个任务提供两个服务的想法。有没有办法把它简化为一项服务?

Answer 1

问题是你重新分配了你的Observable。可能当你将服务注入CardComponent时，这个可观察对象仍然是未定义的，因为这个方法还没有被调用。但是当它被调用时，这个可观察对象会被重新分配。CardComponent不知道这一点。它订阅了原始的Observable，它被重新赋值，不会产生任何新值。为了解决这个问题，你可以使用一个Subject而不是一个Observable，并调用.next()的值作为它的参数。不要重新分配主题。你可以在CardComponent中观察到Subject，一旦Subject发出一个新值，它就会注意到。

以下是相关文档的链接:https://rxjs.dev/guide/subject