快速入门
重要：该库目前处于实验阶段。这意味着破坏性变更可能出现在次要版本（minor）和补丁版本（patch）中。请谨慎升级。如果你在实验阶段将此库用于生产环境，请将版本锁定到补丁级版本，以避免意外的破坏性变更。
如果你需要一个完整可运行的示例，请参考我们的 基础 CodeSandbox 示例。
向应用提供 QueryClient
TypeScript
1import { provideHttpClient } from '@angular/common/http'2import {3 provideTanStackQuery,4 QueryClient,5} from '@tanstack/angular-query-experimental'6 7bootstrapApplication(AppComponent, {8 providers: [provideHttpClient(), provideTanStackQuery(new QueryClient())],9})或在基于 NgModule 的应用中：
TypeScript
1import { provideHttpClient } from '@angular/common/http'2import {3 provideTanStackQuery,4 QueryClient,5} from '@tanstack/angular-query-experimental'6 7@NgModule({8 declarations: [AppComponent],9 imports: [BrowserModule],10 providers: [provideHttpClient(), provideTanStackQuery(new QueryClient())],11 bootstrap: [AppComponent],12})13export class AppModule {}包含查询和修改的组件
angular-ts
1import { Component, Injectable, inject } from '@angular/core'2import { HttpClient } from '@angular/common/http'3import { lastValueFrom } from 'rxjs'4 5import {6 injectMutation,7 injectQuery,8 QueryClient,9} from '@tanstack/angular-query-experimental'10 11@Component({12 template: `13 <div>14 <button (click)="onAddTodo()">Add Todo</button>15 16 <ul>17 @for (todo of todosQuery.data(); track todo.title) {18 <li>{{ todo.title }}</li>19 }20 </ul>21 </div>22 `,23})24export class TodosComponent {25 readonly todoService = inject(TodoService)26 readonly queryClient = inject(QueryClient)27 28 readonly todosQuery = injectQuery(() => ({29 queryKey: ['todos'],30 queryFn: () => this.todoService.getTodos(),31 }))32 33 readonly addTodoMutation = injectMutation(() => ({34 mutationFn: (todo: Todo) => this.todoService.addTodo(todo),35 onSuccess: () => {36 this.queryClient.invalidateQueries({ queryKey: ['todos'] })37 },38 }))39 40 onAddTodo() {41 this.addTodoMutation.mutate({42 id: Date.now().toString(),43 title: 'Do Laundry',44 })45 }46}47 48@Injectable({ providedIn: 'root' })49export class TodoService {50 private readonly http = inject(HttpClient)51 52 getTodos(): Promise<Todo[]> {53 return lastValueFrom(54 this.http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos'),55 )56 }57 58 addTodo(todo: Todo): Promise<Todo> {59 return lastValueFrom(60 this.http.post<Todo>('https://jsonplaceholder.typicode.com/todos', todo),61 )62 }63}64 65interface Todo {66 id: string67 title: string68}