Angular 20 Hạ Cánh! Khám Phá 'Siêu Năng Lực' toSignal() Và Các Tùy Chọn Đỉnh Cao

Lê Lân

07/07/2025

Angular 20 Chính Thức Ra Mắt: Khám Phá API toSignal() và Tương Lai Ngôn Ngữ Phản Ứng

Mở Đầu

Angular 20 đã chính thức xuất hiện với nhiều cải tiến đột phá, trong đó API Signal-based tiếp tục được hoàn thiện mạnh mẽ, đánh dấu bước tiến quan trọng cho mô hình lập trình phản ứng (reactive programming) của Angular.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về một API mới nổi bật — toSignal() — một cầu nối giúp chuyển đổi giữa Observable và Signal. Đây là một bước tiến giúp các nhà phát triển tích hợp hiệu quả hơn với hệ thống phản ứng chi tiết của Angular, từ đó tạo ra các ứng dụng nhanh hơn, rõ ràng và dễ bảo trì.

Nội dung bao gồm: khái niệm toSignal(), cách sử dụng cơ bản, các tuỳ chọn quan trọng, cũng như những lưu ý giúp bạn khai thác tối đa công cụ này.

toSignal() Là Gì?

Khái Niệm Cơ Bản

toSignal() là một hàm giúp chuyển đổi từ luồng dữ liệu dạng Observable (một phần rất phổ biến trong RxJS) thành một Signal — mô hình dữ liệu phản ứng mới của Angular với khả năng quản lý trạng thái chi tiết và tối ưu hơn.

Thông qua toSignal(), bạn có thể dễ dàng làm việc với API, thay đổi trạng thái, hoặc các nguồn dữ liệu phản ứng khác một cách hiệu quả, thể hiện tính khai báo và hiệu suất cao hơn.

Định Nghĩa Hàm

toSignal<T>(source: Observable<T>, options?: {
  initialValue?: unknown;
  requireSync?: boolean;
  manualCleanup?: boolean;
  injector?: Injector;
  equal?: ValueEqualityFn<T>;
}): Signal<T>

Ví Dụ Cơ Bản: Chuyển Đổi Observable HTTP Thành Signal

Mã Nguồn Ví Dụ

import { HttpClient } from '@angular/common/http';
import { Component, inject, OnInit, effect } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { map } from 'rxjs';

@Component({
  selector: 'app-angular-api',
  templateUrl: './angular-api.html',
  styleUrl: './angular-api.scss',
})
export class AngularApi implements OnInit {
  private http = inject(HttpClient);
  URL = './json/country.json';

  countryList = toSignal(
    this.http.get<any>(this.URL).pipe(map((res) => res))
  );

  constructor() {
    effect((onCleanup) => {
      console.log('country value :', this.countryList());
      onCleanup(() => {
        console.log('clean up callback triggered');
      });
    });
  }
}

giải thích

Dòng toSignal() nhận một Observable trả về dữ liệu HTTP và chuyển thành Signal.

Signal này tự động cập nhật khi Observable phát ra giá trị mới.

effect() sử dụng để theo dõi thay đổi dữ liệu và thực thi callback.

onCleanup() được gọi khi component bị hủy hoặc khi effect khởi động lại, giúp quản lý vòng đời hiệu quả.

Bạn nên nhớ: onCleanup() sẽ được kích hoạt khi bối cảnh injection bị hủy (vd: component unmounted) hoặc khi dependency của signal thay đổi.

Các Tuỳ Chọn Quan Trọng Của toSignal()

⚠️ Tuỳ Chọn requireSync

requireSync: true yêu cầu Observable phát giá trị ngay lập tức khi đăng ký.

Ví dụ với Observable đồng bộ

countryList = toSignal(
  of([{ name: { common: 'Aruba' }, region: 'Americas', flag: '🇦🇼' }]),
  { requireSync: true }
);

📝 Chú ý: Với requireSync: true , không cần cung cấp initialValue vì Observable phát giá trị đồng bộ ngay khi subscribe. Signal trả về sẽ không có giá trị undefined trong kiểu dữ liệu.

Ví dụ với Observable không đồng bộ (gây lỗi)

countryList = toSignal(
  of([{ name: { common: 'Aruba' } }]).pipe(delay(500)),
  { requireSync: true }
);

Do có delay(500) , Observable trở thành không đồng bộ.

Angular sẽ phát ra lỗi: NG0601: toSignal() called with requireSync but Observable did not emit synchronously.

Mẹo nhanh

Các Observable từ timer() , interval() , HTTP đều không phát đồng bộ.

of() , BehaviorSubject , ReplaySubject thường phát đồng bộ.

🛠️ Tuỳ Chọn initialValue

Bạn có thể thiết lập giá trị khởi đầu cho signal khi giá trị Observable chưa phát ra lần nào.

timer$ = timer(1000);
timerLog = toSignal(timer$, { initialValue: 0 });

Ở ví dụ này, giá trị signal ban đầu là 0 , sau đó cập nhật khi timer$ phát giá trị sau 1 giây.

📝 Lưu ý: initialValue rất hữu ích khi làm việc với các luồng không phát ngay lập tức, giúp tránh undefined .

🔁 Tuỳ Chọn equal (So sánh Tùy chỉnh)

Bạn có thể định nghĩa hàm so sánh riêng để kiểm soát xem signal có cần cập nhật giá trị hay không.

timer$ = timer(1000);
timerLog = toSignal(timer$, {
  initialValue: 0,
  equal: (prev: number, curr: number) => {
    console.log(prev, curr);
    return curr === 5;
  }
});

Nếu hàm trả về true → Signal không cập nhật.

Nếu trả về false → Signal cập nhật.

💉 Sử Dụng injector Bên Ngoài Injection Context

Nếu bạn sử dụng toSignal() ngoài constructor hoặc runInInjectionContext() , Angular sẽ báo lỗi:

NG0203: toSignal() can only be used within an injection context

Cách khắc phục: truyền thủ công injector vào:

this.countryList = toSignal(
  this.http.get<any>(this.URL).pipe(map((res) => res)),
  { injector: this._injector }
);

🧹 Điều Khiển Cleanup Với manualCleanup

Mặc định, toSignal() sẽ tự động hủy đăng ký khi component bị destroy.

Nếu bạn muốn kiểm soát thủ công việc unsubscribe, bạn có thể dùng manualCleanup: true :

this.countryList = toSignal(
  this.http.get<any>(this.URL).pipe(
    takeUntil(this._destroy$),
    map((res: any) => res)
  ),
  { manualCleanup: true }
);

Kết Luận

Signal API trong Angular 20, đặc biệt là toSignal() , giúp việc quản lý trạng thái và dòng dữ liệu phản ứng trở nên đơn giản, hiệu quả và giữ được tính khai báo cao hơn rất nhiều. Việc nắm bắt cách chuyển đổi giữa Observable và Signal sẽ giúp bạn xây dựng được các ứng dụng Angular có hiệu suất tốt hơn, dễ bảo trì và mở rộng trong tương lai.

📌 Hãy thử áp dụng toSignal() trong các dự án để tận dụng tối đa sức mạnh của reactive programming với Angular 20!

Bạn cũng có thể đón xem các bài viết tiếp theo về computed , effect và những tính năng mới khác của Angular 20.

Tham Khảo

Angular Official Blog — Signal Based Reactivity

Vetriselvan, "Understanding toSignal() in Angular 20" - Dev.to (August 15, 2023)

RxJS Documentation — Observable Concepts

StackOverflow Discussions on Angular Signals

Angular API Documentation:
angular/core/rxjs-interop