سیگنال ها (Signals)

سیگنال های انگولار یعنی «حالت واکنش گرا». حالت واکنش گرا یعنی مقداری که با تغییرش، نما خودکار تازه می شود. مقدار را با فراخوانی می خوانی. سپس با set یا update عوضش می کنی. همچنین با computed مقدار مشتق می سازی. و با effect کار جانبی اجرا می کنی.

سیگنال چیست؟

سیگنال (Signal) یک مقدار قابل خواندن با فراخوانی است. بنابراین می گویی count() تا بخوانی. سپس با set یا update مقدار جدید می دهی. همچنین computed فرمول فقط خواندنی می سازد. و effect هر تغییر را شنود می کند.

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);

مشاهده در ادیتور

کار با سیگنال ها

اول مقدار اولیه بده. سپس با set مستقیم بنویس. بعد با update بر اساس مقدار قبلی تغییر بده. در پایان با فراخوانی، مقدار فعلی را بخوان.

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

مشاهده در ادیتور

نمونه عملی

در این نمونه، count یک سیگنال است. سپس double با computed ساخته می شود. و effect هر تغییر را لاگ می کند.

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);

مشاهده در ادیتور

گام های عملی

1. یک سیگنال با مقدار اولیه بساز.
2. یک computed برای فرمول فقط خواندنی بساز.
3. یک effect برای شنود تغییرات بساز.
4. با update مقدار را افزایش بده.

مقادیر مشتق و افکت ها

مشتق (Computed) یعنی خروجی از ورودی ها. بنابراین وقتی ورودی ها عوض شوند، خروجی دوباره حساب می شود. افکت (Effect) یعنی واکنش بیرونی مانند لاگ یا همگام سازی.

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

مشاهده در ادیتور

تعامل با RxJS

گاهی داده ها «جریانی» هستند. Observable را با toSignal به سیگنال تبدیل کن. همچنین سیگنال را با toObservable به Observable برگردان.

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

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

const count = signal(0);
const count$ = toObservable(count);

مشاهده در ادیتور

نکته: برای SSR حتما initialValue بده. همچنین اثرها را کوچک نگه دار.

جمع بندی سریع

• signal بخوان، با set/update بنویس.
• computed فقط خواندنی و سریع بماند.
• effect سبک و بدون حلقه باشد.
• با toSignal/toObservable پل بزن.

بیشتر بخوان: کنترل جریان انگولار و تغییر تشخیص انگولار.