Расскажите про Angular Signals: signal, computed, effect — как используете в компоненте
Answer from AI
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.