Angular：不使用effect()，如何响应rxResource的.value()变更并执行副作用？

rxResource本质返回的是Observable流，我们可以通过直接订阅流，或是将其转换为Signal后使用watch()方法这两种方式，在不依赖effect()的前提下响应数据变更并执行副作用。

方案一：直接订阅rxResource的Observable #

在组件初始化阶段直接订阅resource$，当请求完成、数据更新时，在订阅回调中执行副作用逻辑。

组件代码示例 #

import { OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { YourService } from './your.service';

export class YourComponent implements OnInit, OnDestroy {
  private resourceSubscription?: Subscription;

  constructor(private service: YourService) {}

  ngOnInit(): void {
    this.service.setItemId(1);
    // 订阅rxResource返回的Observable
    this.resourceSubscription = this.service.resource$.subscribe({
      next: (data) => {
        // 这里编写你的副作用逻辑，比如更新本地状态、调用业务方法等
        console.log('数据已更新:', data);
        this.processUpdatedData(data);
      },
      error: (err) => {
        // 处理请求错误
        console.error('请求失败:', err);
      }
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.resourceSubscription?.unsubscribe();
  }

  private processUpdatedData(data: any): void {
    // 自定义副作用处理逻辑
  }
}

方案二：转换为Signal后使用watch()（Angular 17+） #

利用toSignal()将rxResource的Observable转换为Signal，再通过watch()监听Signal的变化触发副作用。watch()是Angular 17+提供的API，专门用于响应式依赖变化时执行副作用，无需包裹在effect()中。

组件代码示例 #

import { OnInit, inject } from '@angular/core';
import { toSignal, watch } from '@angular/core/rxjs-interop';
import { YourService } from './your.service';

export class YourComponent implements OnInit {
  private service = inject(YourService);
  // 将Observable转换为Signal
  private resourceSignal = toSignal(this.service.resource$, { initialValue: null });

  constructor() {
    // 监听Signal变化，执行副作用
    watch(() => this.resourceSignal(), (data) => {
      if (data !== null) {
        console.log('Signal数据已更新:', data);
        this.processUpdatedData(data);
      }
    });
  }

  ngOnInit(): void {
    this.service.setItemId(1);
  }

  private processUpdatedData(data: any): void {
    // 自定义副作用处理逻辑
  }
}

注意事项 #

• 使用订阅方式时，必须在组件销毁时取消订阅，防止内存泄漏；若只是模板渲染数据，可使用async管道，但针对副作用执行，直接订阅更合适。
• watch()仅支持Angular 17及以上版本，低版本项目需使用方案一。
• 两种方案都会自动响应itemID$信号变化引发的rxResource重新请求，进而触发副作用。

内容的提问来源于stack exchange，提问作者Nevyan Dimitrov Neykov