Sobes.tech
Назад к вопросам
Middle
1

Расскажите про Angular Signals: signal, computed, effect — как используете в компоненте

Компании, где спрашивали
Protech

Ответ от нейросети

sobes.tech AI

В Angular Signals — это новая реактивная система для управления состоянием и реакциями на изменения данных.

  • signal — это реактивное значение, которое можно читать и обновлять. При изменении значения все подписчики автоматически обновляются.

  • computed — это производное значение, которое вычисляется на основе других сигналов и автоматически обновляется при изменении зависимостей.

  • effect — функция, которая выполняется при изменении сигналов, на которые она подписана, обычно для побочных эффектов (например, обновление DOM, вызов API).

Пример использования в компоненте:

import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="increment()">Increment</button>
    <p>Count: {{ count() }}</p>
    <p>Double: {{ doubleCount() }}</p>
  `
})
export class CounterComponent {
  count = signal(0); // исходное состояние

  doubleCount = computed(() => this.count() * 2); // вычисляемое значение

  constructor() {
    effect(() => {
      console.log('Count changed:', this.count()); // побочный эффект при изменении count
    });
  }

  increment() {
    this.count.set(this.count() + 1);
  }
}

Здесь count — сигнал с состоянием, doubleCount — вычисляемое значение, зависящее от count, а effect реагирует на изменения count, выполняя побочный эффект (логирование). Такой подход упрощает управление состоянием и реактивность в Angular.