angular-signals-http

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Signals + HttpClient

Version: Angular 16+ (2025) Tags: Signals, HTTP, toSignal, toObservable

References: toSignal

版本： Angular 16+ (2025) 标签： Signals, HTTP, toSignal, toObservable

参考链接： toSignal

Best Practices

最佳实践

Use toSignal for HTTP

import { toSignal } from '@angular/core/rxjs-interop';

@Component({})
export class MyComponent {
  private http = inject(HttpClient);
  
  users = toSignal(this.http.get<User[]>('/api/users'), {
    initialValue: []
  });
}

Use toObservable

import { toObservable, toSignal } from '@angular/core/rxjs-interop';

@Component({})
export class MyComponent {
  name = signal('John');
  name$ = toObservable(this.name);
}

使用toSignal处理HTTP请求

import { toSignal } from '@angular/core/rxjs-interop';

@Component({})
export class MyComponent {
  private http = inject(HttpClient);
  
  users = toSignal(this.http.get<User[]>('/api/users'), {
    initialValue: []
  });
}

使用toObservable

import { toObservable, toSignal } from '@angular/core/rxjs-interop';

@Component({})
export class MyComponent {
  name = signal('John');
  name$ = toObservable(this.name);
}