Angular Signals: signal, computed, effect туралы айтып беріңіз — оларды компонентте қалай қолданасыз

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 өзгерді:', this.count()); // count өзгерген кезде жанама әсер
    });
  }

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

Мұнда count — күйі бар сигнал, doubleCount — count-ке тәуелді есептелетін мән, ал effect count өзгерген кезде жанама әсерді (логтау) орындайды. Мұндай тәсіл күйді басқаруды және реактивтілікті Angular-да жеңілдетеді.