Angular signallar

Signallar reaktiv state (holat): chaqirish orqali o‘qing (masalan, count() ), set() / update() bilan yangilang, computed() bilan oling va effect() bilan yon ta’sirlarni ishga tushiring.

Signallar uchun asoslar

• Signal: Siz uni chaqirish orqali o‘qigan qiymat (masalan, count()). Uni yangilash qaramog‘idagilarni xabardor qiladi.
• Holat: Mahalliy component holati uchun signal() dan foydalaning.
• Olingan: faqat o‘qish uchun formulalar uchun computed() dan foydalaning.
• Effektlar: Bog‘liqlar o‘zgarganda nojo‘ya effektlarni ishga tushirish uchun effect() dan foydalaning.

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

const count = signal(0);
const double = computed(() => count() * 2);
effect(() => console.log('count =', count()));

count.update(n => n + 1);

Signallar bilan ishlash

Signalni .set() yoki .update() yordamida yangilang.

Signalni funksiya kabi chaqirish orqali o‘qing.

const count = signal(0);
count.set(1);
count.update(n => n + 1);
console.log(count());

Misol

Signaldan foydalaning, computed() bilan hosil qiling, effect() bilan reaksiyaga kirishing va update() bilan yangilang:

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Signals</h3>
    <p>Count: {{ count() }}</p>
    <p>Double: {{ double() }}</p>
    <button (click)="inc()">Increment</button>
  `
})
export class App {
  count = signal(0);
  double = computed(() => this.count() * 2);
  constructor() {
    effect(() => console.log('count changed', this.count()));
  }
  inc() { this.count.update(n => n + 1); }
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• signal(0): Siz chaqirish orqali o‘qigan reaktiv holatni yaratadi (masalan, count()).
• computed(() => ...): Boshqa signallardan faqat o‘qish uchun qiymat (double()) chiqaradi.
• effect(() => ...): Har safar bog‘liqliklar o‘zgarganda ishlaydi (count() yangilanishlarida jurnallar).
• update(n => n + 1) : Signalga yozadi va qaramog‘idagilarni xabardor qiladi.

Olingan qiymatlar va effektlar

• computed() ichida faqat o‘qish uchun formulalarni o‘rash; u qaramliklar o‘zgarganda qayta hisoblaydi.
• Ro‘yxatga olish yoki sinxronlash kabi nojo‘ya ta’sirlar uchun effect() dan foydalaning.
• Effektlarni idempotent va yengil saqlang.

const a = signal(2);
const b = signal(3);
const sum = computed(() => a() + b());
effect(() => console.log('sum =', sum()));

Misol

computed() yordamida olingan qiymatni hisoblang va uni effect() yordamida kuzating:

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Derived & Effects</h3>
    <p>a: {{ a() }} | b: {{ b() }} | sum: {{ sum() }}</p>
    <button (click)="incA()">inc a</button>
    <button (click)="incB()">inc b</button>
  `
})
export class App {
  a = signal(2);
  b = signal(3);
  sum = computed(() => this.a() + this.b());
  constructor() { effect(() => console.log('sum =', this.sum())); }
  incA() { this.a.update(n => n + 1); }
  incB() { this.b.update(n => n + 1); }
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• computed : a() yoki b() o‘zgarganda sum() qayta hisoblab chiqadi.
• effect : sum() yangilanishlariga munosabat bildiradi (har bir o‘zgarishda qayd qilinadi).
• incA()/incB(): signallarni oshirish uchun update’dan foydalaning — bu qayta hisoblashni ishga tushiradi.

RxJS bilan o‘zaro ishlash

• Shablonga mos o‘qish uchun Observable ni toSignal() bilan signalga aylantiring.
• Oqim API-lari bilan integratsiya qilish uchun signalni to Observable() yordamida Observablega aylantiring.

import { signal, computed, effect, toSignal, toObservable } from '@angular/core';
import { interval, map } from 'rxjs';

// Observable -> Signal
const seconds$ = interval(1000).pipe(map(n => n + 1));
const seconds = toSignal(seconds$, { initialValue: 0 });

// Signal -> Observable
const count = signal(0);
const count$ = toObservable(count);

Signallarning tezkor ma’lumotnomasi

• Create: signal(initial)
• O‘qing: signalni chaqiring (masalan, count())
• Write: set(value), update(fn)
• Derived: computed(fn)
• Effects: effect(fn)
• RxJS interop: toSignal(observable, { initialValue }), toObservable(signal)