如何为Observable流设置默认Null值，实现查询参数变更时重显骨架屏？

我有一段运行正常的Observable代码：

this.studentApplications$ = this.activatedRoute.queryParams.pipe(
        switchMap((obj: any) => this.httpService.getStudentApplicationsList(this.numberOfRows, new URLSearchParams(obj).toString()))
      );

这段代码监听查询参数的变化并重新执行搜索。问题在于，页面初始加载时，由于流的初始值为null，我能看到骨架屏；但当查询参数变更时，流会保留现有对象数组直到新结果返回，导致无法再次显示骨架屏。需要实现：查询参数触发变更时，立即为流设置默认的null值，使骨架屏能短暂显示直到新结果加载完成。

有两种简单的实现方式：

• 方式一：使用concat合并null和请求流
  在switchMap内部，先通过of(null)发出null值，再拼接HTTP请求流，这样每次查询参数变化时，流会先推送null触发骨架屏，再等待请求结果：

  import { concat, of } from 'rxjs';
  
  this.studentApplications$ = this.activatedRoute.queryParams.pipe(
    switchMap((obj: any) => 
      concat(
        of(null),
        this.httpService.getStudentApplicationsList(this.numberOfRows, new URLSearchParams(obj).toString())
      )
    )
  );
  

• 方式二：使用startWith在请求流开头添加null
  给内部的HTTP请求流加上startWith(null)操作符，让它在每次发起请求前先推送null值：

  import { startWith } from 'rxjs/operators';
  
  this.studentApplications$ = this.activatedRoute.queryParams.pipe(
    switchMap((obj: any) => 
      this.httpService.getStudentApplicationsList(this.numberOfRows, new URLSearchParams(obj).toString())
        .pipe(startWith(null))
    )
  );
  

注意：如果HTTP请求可能出现错误，建议添加catchError操作符处理异常，避免流被终止导致后续查询参数变更无法触发新的请求。

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