角度信号和组件结构

Question

我看过各种 Angular 18 课程，例如 Deborah Kurata 的课程，似乎推荐的模式如下。

UI组件<-- Signals <-- Observable <-- Web Api <-- Database etc.

只有服务包含 Observables，并且 UI 使用服务中包装 observables 的信号。

我试图理解它在我的示例中是如何工作的。 我有一个搜索 UI 组件、列表 UI 组件和一个服务。 搜索 UI 组件包含用于查找客户的各种搜索字段。 列表组件显示客户列表。 服务组件调用 Web API 以根据搜索组件获取客户。

无法计算出正确的调用顺序。 列表组件是否应该迭代服务的列表信号。该服务需要知道搜索参数才能执行此操作。

服务是否包含类变量以允许搜索 ui 组件设置搜索参数？ 这不会触发可观察的运行，所以我是否让搜索参数也发出信号？

服务正在按预期运行。我确实有一个附带问题，由于某种原因，列表不会迭代信号包装的可观察量，但如果我订阅它，则会通过可观察量进行迭代。

Answer 1

您的问题中缺少一条信息（或者至少我不清楚） - 该服务是否只是调用 API 还是还保存（缓存）与从返回的搜索条件相匹配的结果API。 换句话说 - 该服务是有状态服务，还是只是通往服务器的桥梁。

无论如何，如果您正在寻找推荐的最佳实践，我会推荐以下内容：

1. 在您的服务中，持有搜索条件的行为主体。
2. 服务应该公开一个方法（

   setSearchCriteria

   ）来修改搜索条件。每当用户通过 UI 更改条件时，搜索 UI 都会调用它。

3. setSearchCriteria

   方法将简单地调用主题上的

   next

   。
4. 向服务添加一个名为

   latestResults$

   的属性，其类型为

   Observable<Result>

   ，使用

   switchMap

   运算符从搜索条件主题派生，并调用实际 API。
5. 持有使用

   latestResult

   创建的

   latestResults$.toSignal

   信号 - 这也将订阅可观察对象，从而激活它。
6. List UI 组件将绑定到信号。

如果您需要更详细地演示如何操作，您可以查看以下 UDEMY 课程：

使用信号的现代 Angular - 缺失的指南

它讨论了 rxjs-信号互操作，以及如何实现基于信号的有状态服务。