RxJS Subject và BehaviorSubject khác nhau như thế nào? Nêu ví dụ ứng dụng thực tế trong quản lý trạng thái chia sẻ dữ liệu giữa các component không có quan hệ cha con.

Question

Accepted Answer

1. Sự khác biệt cốt lõi

Subject: 
Không lưu trữ giá trị hiện tại (không có trạng thái ban đầu).
Khi một subscriber mới đăng ký (subscribe()), nó sẽ chỉ nhận được các giá trị được phát ra sau thời điểm đăng ký đó. Các giá trị trước đó bị bỏ qua.

BehaviorSubject:
Bắt buộc phải khởi tạo với một giá trị ban đầu.
Lưu trữ trạng thái hiện tại (latest value).
Khi một subscriber mới đăng ký, nó sẽ ngay lập tức nhận được giá trị hiện tại gần nhất, sau đó mới tiếp tục nhận các giá trị tiếp theo.

2. Ứng dụng thực tế trong Shared Service (State Management nhẹ)
Khi các component không cùng cây phân cấp muốn chia sẻ trạng thái (ví dụ: Trạng thái giỏ hàng hoặc thông tin User đăng nhập), ta dùng một Service trung gian chứa BehaviorSubject.
3. Ví dụ minh họa
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // Khoi tao voi gia tri mac dinh la false (chua dang nhap)
  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);

// Expose duoi dang Observable de cac component khong bi goi nham ham next()
  isAuthenticated$ = this.isAuthenticatedSubject.asObservable();

login() {
    this.isAuthenticatedSubject.next(true);
  }

logout() {
    this.isAuthenticatedSubject.next(false);
  }
}
4. Kinh nghiệm thực chiến

Luôn biến đổi Observable gốc thành dạng asObservable() khi cung cấp cho các component bên ngoài để ngăn chặn việc component gọi nhầm phương thức next(), giúp bảo vệ tính toàn vẹn của dữ liệu.
Sử dụng BehaviorSubject cho các trạng thái cần hiển thị ngay lập tức khi component được tải lên (như trạng thái loading, thông tin user).

RxJS Subject và BehaviorSubject khác nhau như thế nào? Nêu ví dụ ứng dụng thực tế trong quản lý trạng thái chia sẻ dữ liệu giữa các component không có quan hệ cha con.

1. Sự khác biệt cốt lõi

2. Ứng dụng thực tế trong Shared Service (State Management nhẹ)

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi angular liên quan cùng chủ đề