Angular中如何复用带动态参数的Observable？

问题原因 #

你定义的test$是冷Observable，它依赖name的valueChanges流：

• 当bla的valueChanges触发并订阅test$时，如果name已经有值（之前输入过），valueChanges不会重复发射这个旧值，导致test$没有数据输出，最终data$完全不触发。
• 硬编码test$ = this.myService.getUserByName$('John')时，这个Observable会立即执行请求并发射数据，自然能正常触发data$。

解决方案1：把test$改成参数化函数 #

将test$改为接收name参数的函数，这样每次bla变化时，都能基于当前最新的name值发起请求，同时用withLatestFrom获取name的最新有效值：

// 定义参数化的Observable生成函数
const getUserByName$ = (name: string) => this.myService.getUserByName$(name).pipe(
  filter(user => !!user)
);

this.data$ = this.form.get('bla')!.valueChanges.pipe(
  filter(bla => !!bla),
  // 同步获取name的最新有效值
  withLatestFrom(this.form.get('name')!.valueChanges.pipe(filter(name => !!name))),
  switchMap(([bla, name]) => 
    getUserByName$(name).pipe(
      map(services => services.map(service => ({ key: service.id, value: service.name })))
    )
  )
);

解决方案2：用combineLatest合并双流 #

如果需要只要name和bla都有有效值，任意一个变化就触发更新，可以用combineLatest合并两个输入流：

// 先单独处理两个输入流，确保只保留有效值
const validName$ = this.form.get('name')!.valueChanges.pipe(filter(name => !!name));
const validBla$ = this.form.get('bla')!.valueChanges.pipe(filter(bla => !!bla));

this.data$ = combineLatest([validName$, validBla$]).pipe(
  switchMap(([name, bla]) => 
    this.myService.getUserByName$(name).pipe(
      filter(user => !!user),
      map(services => services.map(service => ({ key: service.id, value: service.name })))
    )
  )
);

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