如果已发出新数据，如何更新已转换为信号的可观察量？

Question

我正在尝试利用 Angular 的一些新的 Signal 反应性。我正在遵循这个工作流程，并将我的一个可观察量转换为信号，然后将其读取并显示在我的屏幕上。

https://angular.dev/guide/signals/rxjs-interop#tosignal

工作示例

** T.S **

    response_obs$ =
            this.apiService.getResponse();

    response_signal:  Signal<any> = toSignal(response_obs$,  {initialValue: 0})


** HTML **

    <div *ngIf="response_signal()">
      <div class="item" *ngFor="let item of response_signal().items ">
          <label>{{ item.name }}</label>
          <small>{{ item.website }}</small>
      </div>
    </div>

这一切都可以正常工作并打印。我们使用 toSignal() 函数替换了异步管道。

接下来我要努力实现的是反应性。当我在应用程序的其他部分发布到此 API 时，可观察到的数据将发出新数据，如果我刷新网页，则会出现该数据，但更改未注册。

可观察的更新可以通过事件发射器触发，Angular Signals 工作流程中是否有可以在此处使用的工具？

Answer 1

Angular 的 Signals 库在 Angular 13 中引入，提供了一种以更简洁、更高效的方式处理反应式数据的方法。但是，对于当可观察值因事件发射器而发生变化时更新信号的特定用例，您可以使用角度信号实现反应性。为了让您的 Signal 对事件发射器触发的底层 observable 的变化做出反应，您可以使用 RxJS 中的合并运算符将原始 observable 与代表事件发射器的 observable 组合起来。操作方法如下： 1. 像之前一样定义您的

response_obs$

observable：

response_obs$ = this.apiService.getResponse();

2. 为事件发射器创建一个可观察对象。您可以通过创建主题并在事件发生时发出值来做到这一点：

   私有 updateEventEmitter = new subject();

//触发更新事件的方法

triggerUpdate() {
  this.updateEventEmitter.next();
}

// 订阅事件发射器 observable

updateEvent$ = this.updateEventEmitter.asObservable();

3. 使用合并运算符合并原始的 response_obs$ observable 和 updateEvent$ observable。这将创建一个新的可观察量，每当原始可观察量发出数据或事件发射器发出值时，该新可观察量就会发出。

   combinedObs$ = 合并( this.response_obs$, this.updateEvent$.pipe(switchMap(() => this.apiService.getResponse())) );

4. 将

   combinedObs$

   可观察量转换为信号，就像之前所做的那样：

   response_signal: Signal = toSignal(this.combinedObs$, {initialValue: 0 });

现在，每当您调用

triggerUpdate()

时，它都会触发事件发射器，而事件发射器又会使用 this.apiService.getResponse() 中的新数据更新

combinedObs$

可观察对象。信号将对组合Obs$ 中的更改做出反应，并在 HTML 模板中显示更新的数据。在 HTML 模板中，您不需要进行任何更改，因为您已经使用

response_signal()

函数来显示数据，并且它将自动对信号中的更改做出反应。