如何用Angular Signals和RxJS构建声明式/响应式可复用Feed？

我正在开发一个使用Signals（Angular新响应式库的一部分）和RxJS的Angular应用。我有一个NotificationService，需要从第三方服务（此处为stream_client）构建Feed。该Feed与当前用户绑定，需在用户切换时自动更新；同时<feed_type>需支持复用，可接收'notification'、'general'或'all'等不同字符串值。

现有相关代码如下：

@Injectable({
  providedIn: 'root',
})
export class NotificationService {
  private user_service = inject(UserService);
  private stream_service = inject(StreamService);

  current_user$ = this.user_service.current_user$;
  stream_client = this.stream_service.stream_client;

  feed = toSignal(
    this.current_user$.pipe(
      map((user) => {
        const stream_client = this.stream_client();
        if (user && stream_client) {
          return stream_client.feed(<feed_type>, user.uid);
        }
        return null;
      }),
    ),
  );
}

当前Feed以Signal形式构建，依赖current_user$ Observable。用户切换时，map操作符会基于用户ID（user.uid）、stream_client和<feed_type>字符串创建新Feed。

此方案虽可行，但略显命令式，且与stream_client和UserService的具体实现细节耦合度较高。

如何遵循Angular新响应式库的原则，将代码重构为更具声明式、响应式的形式？我希望Feed能在用户、stream_client或<feed_type>变化时自动更新，无需在服务中显式映射值；同时<feed_type>需保持可复用性，按需接收不同字符串值。

1. 统一响应式范式：用Signal替代Observable依赖 #

把现有Observable依赖转换为Signal，利用Signals的自动追踪特性，实现依赖变化时的自动更新：

@Injectable({ providedIn: 'root' })
export class NotificationService {
  private userService = inject(UserService);
  private streamService = inject(StreamService);

  // 将用户Observable转为Signal，统一响应式模型
  private currentUser = toSignal(this.userService.current_user$, { initialValue: null });
  // 把stream_client方法包装为computed Signal，追踪其返回值变化
  private streamClient = computed(() => this.streamService.stream_client());

  // 暴露方法接收feedType，返回对应类型的Feed Signal
  getFeed(feedType: 'notification' | 'general' | 'all'): Signal<any | null> {
    return computed(() => {
      const user = this.currentUser();
      const client = this.streamClient();
      
      if (user && client) {
        return client.feed(feedType, user.uid);
      }
      return null;
    });
  }
}

2. 利用Computed Signal实现自动响应 #

这里用computed替代RxJS的map操作符，computed会自动追踪它依赖的currentUser和streamClient两个Signal，只要其中任意一个值变化，就会重新计算生成新的Feed。通过getFeed方法接收feedType参数，完美实现了Feed类型的复用需求。

3. 进一步解耦：依赖抽象而非具体实现 #

如果想彻底解耦UserService和StreamService的细节，可以通过抽象接口注入，遵循依赖倒置原则：

// 定义抽象接口
export abstract class UserProvider {
  abstract currentUser: Signal<User | null>;
}

export abstract class StreamClientProvider {
  abstract getClient(): StreamClient | null;
}

// 实现具体提供者
@Injectable()
export class DefaultUserProvider extends UserProvider {
  currentUser = toSignal(inject(UserService).current_user$, { initialValue: null });
}

@Injectable()
export class DefaultStreamClientProvider extends StreamClientProvider {
  getClient() {
    return inject(StreamService).stream_client();
  }
}

// 模块中配置提供者
@NgModule({
  providers: [
    { provide: UserProvider, useClass: DefaultUserProvider },
    { provide: StreamClientProvider, useClass: DefaultStreamClientProvider }
  ]
})
export class CoreModule {}

// 最终解耦后的NotificationService
@Injectable({ providedIn: 'root' })
export class NotificationService {
  private userProvider = inject(UserProvider);
  private streamClientProvider = inject(StreamClientProvider);

  private streamClient = computed(() => this.streamClientProvider.getClient());

  getFeed(feedType: 'notification' | 'general' | 'all'): Signal<any | null> {
    return computed(() => {
      const user = this.userProvider.currentUser();
      const client = this.streamClient();
      
      if (user && client) {
        return client.feed(feedType, user.uid);
      }
      return null;
    });
  }
}

4. 组件中的使用方式 #

在组件中只需调用getFeed传入对应类型，即可获取自动更新的Feed Signal：

@Component({
  template: `
    <div *ngIf="notificationFeed() as feed">
      <!-- 渲染Feed内容 -->
    </div>
  `
})
export class NotificationComponent {
  private notificationService = inject(NotificationService);
  notificationFeed = this.notificationService.getFeed('notification');
}

内容的提问来源于stack exchange，提问作者syahiruddin