译零 TransZero · TanStack Query 中文文档
主站

后台拉取指示器

更新于 2026-11-02 Angular 查看英文原文 ↗

查询的 status === 'pending' 状态足以显示查询的初始硬加载状态,但有时你可能希望额外显示一个指示器,表明某个查询正在后台重新拉取。为此,查询还提供了一个 isFetching 布尔值,你可以用它来表明查询正处于拉取状态,而无需关心 status 变量的实际状态:

angular-ts
1@Component({2  selector: 'todos',3  template: `4    @if (todosQuery.isPending()) {5      Loading...6    } @else if (todosQuery.isError()) {7      An error has occurred: {{ todosQuery.error().message }}8    } @else if (todosQuery.isSuccess()) {9      @if (todosQuery.isFetching()) {10        Refreshing...11      }12      @for (todos of todosQuery.data(); track todo.id) {13        <todo [todo]="todo" />14      }15    }16  `,17})18class TodosComponent {19  readonly todosQuery = injectQuery(() => ({20    queryKey: ['todos'],21    queryFn: fetchTodos,22  }))23}

显示全局后台拉取加载状态

除了单个查询的加载状态外,如果你希望在任意查询(包括后台查询)处于拉取状态时显示一个全局加载指示器,则可以使用 injectIsFetching 函数:

angular-ts
1import { injectIsFetching } from '@tanstack/angular-query-experimental'2 3@Component({4  selector: 'global-loading-indicator',5  template: `6    @if (isFetching()) {7      <div>Queries are fetching in the background...</div>8    }9  `,10})11export class GlobalLoadingIndicatorComponent {12  readonly isFetching = injectIsFetching()13}

本页为 TanStack Query 文档(Angular 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de