Skip to main content

Як можна керувати станом за допомогою сервісів?

AngularJunior~1 хв читання

Керувати станом через сервіси - це простий і потужний спосіб тримати дані під контролем без складних бібліотек.

Що робить сервіс "керуючим станом":

Він:

зберігає змінні (наприклад, user, cart, isLoading)
надає методи для зміни цих змінних
віддає значення компонентам - напряму або через потік (BehaviorSubject)

Приклад:

ts

@Injectable({ providedIn: 'root' })
export class CartService {
  private cartItems = new BehaviorSubject<Product[]>([]);
  cart$ = this.cartItems.asObservable();

  add(item: Product) {
    const current = this.cartItems.value;
    this.cartItems.next([...current, item]);
  }

  clear() {
    this.cartItems.next([]);
  }
}

Компонент просто підписується:

ts

this.cartService.cart$.subscribe(items => this.cart = items);

Що в підсумку:

Компоненти не зберігають логіку і дані в собі - вони просто відображають
Усі зміни йдуть централізовано
Стан живе, навіть якщо компонент знищено
Підписники автоматично отримують оновлення

Висновок: Сервіс стає єдиним сховищем і диспетчером, де все прозоро, реактивно і під контролем. Для 90% завдань цього вже достатньо.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.