如何启停类/服务初始化时声明的Angular Resource与rxResource API

核心需求 #

需要按需启停Resource API，启停定义如下：

• 启动：API正常工作，根据输入信号主动加载请求并响应信号变化；
• 停止：无返回值且保持idle状态，即使请求信号发生变化也不响应。

最小可复现代码 #

HTML代码 #

<div>
  <div>
    Resource Request triggers:
  </div>
  <div>
    <input [(ngModel)]="id" type="number"/>
  </div>
</div>
<div>
  @if(![rs.Loading, rs.Reloading].includes(rxResource.status())) {
    {{rxResource.value() | json}}
  } @else{
    Loading...
  }
</div>
<hr/>
<div>
  @if(![rs.Loading, rs.Reloading].includes(resource.status())) {
    {{resource.value() | json}}
  } @else{
    Loading...
  }
</div>
<hr/>
<div>
<button (click)="start()">Start Listening</button>
<button (click)="stop()">Stop Listening</button>
</div>

TypeScript代码 #

export class App {
    id = signal(1);
    rs = ResourceStatus;
    http = inject(HttpClient);
    resourceRequest = (): ResourceRequest => {
      return {
        id: this.id(),
      };
    };
    resource: ResourceRef<any> = resource<ResourceRequest, any>({
      request: this.resourceRequest,
      loader: ({ request: { id }, abortSignal }) => {
        return fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
          signal: abortSignal,
        }).then((res: any) => res.json());
      },
    });
    rxResource: ResourceRef<any> = rxResource<ResourceRequest, any>({
      request: this.resourceRequest,
      loader: ({ request: { id } }) => {
        return this.http.get<any>(
          `https://jsonplaceholder.typicode.com/todos/${id}`
        );
      },
    });

    start() {
      // 恢复监听请求信号并响应变化
      this.resource.resume();
      this.rxResource.resume();
    }

    stop() {
      // 暂停监听请求信号
      this.resource.pause();
      this.rxResource.pause();
      // 清除当前状态和值，回到idle状态
      this.resource.clear();
      this.rxResource.clear();
    }
}

方案说明 #

• 启动逻辑：调用ResourceRef的resume()方法，恢复资源对请求信号变化的监听，自动触发加载逻辑。
• 停止逻辑：先调用pause()方法暂停对请求信号的监听，再调用clear()方法清除当前的资源值和状态，使资源回到idle状态，此时即使请求信号变化也不会触发加载。

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