Angular Signals ו-Effects

Angular שינתה את הדרך שבה היא מטפלת בריאקטיביות (reactivity). אין יותר צורך ב-Zone.js כדי לזהות כל שינוי קטן. Signals מאפשרים ל-Angular לעדכן רק את החלקים הספציפיים ב-UI שמשתנים. זה הופך את האפליקציות שלך למהירות יותר ומאפשר מצב zoneless.

מהם Signals?

Signal הוא מכולה (container) עבור ערך ריאקטיבי. כאשר הערך משתנה, Angular יודעת בדיוק אילו חלקים בתבנית (template) יש לעדכן.

  • signal(): יוצר signal חדש. השתמש ב-.set() כדי להחליף ערך או ב-.update() כדי לשנות ערך בהתבסס על הערך הנוכחי.
  • computed(): יוצר signal לקריאה בלבד (read-only). הוא גוזר את ערכו מ-signals אחרים. Angular מחשבת זאת רק כשקוראים לערך ומאחסנת את התוצאה בזיכרון מטמון (cache).
  • effect(): מריץ קוד כאשר signal משתנה. השתמש בזה עבור side effects כמו logging או שינויי DOM ידניים.

מתי להשתמש ב-Signals לעומת RxJS

אין צורך לבחור באחד מהם. כדאי להשתמש בשניהם למשימות שונות.

השתמש ב-Signals עבור:

  • שמירת מצב ה-UI.
  • הנעת רינדור התבנית (template rendering).
  • החלפת @Input() ו-@Output().
  • עבודה באפליקציות zoneless.

השתמש ב-RxJS עבור:

  • טיפול בזרמים אסינכרוניים (async streams) כמו HTTP או WebSockets.
  • לוגיקה מורכבת כמו debouncing או החלפת זרמים (switching streams).
  • שילוב של רצפי אירועים מרובים.

ניתן לחבר ביניהם באמצעות rxjs-interop:

  • toSignal(): ממיר Observable ל-Signal.
  • toObservable(): ממיר Signal ל-Observable.

APIs חדשים ללא Decorators

Angular 17+ הציגה דרכים חדשות לניהול זרימת נתונים ללא שימוש ב-decorators.

  • input(): signal לקריאה בלבד עבור נתונים המגיעים מרכיב אב (parent).
  • model(): signal הניתן לכתיבה עבור two-way binding. הוא מחליף את התבנית הישנה של @Input() ו-@Output().
  • output(): דרך לשלוח (emit) אירועים מילד לאב. זהו אינו signal, אך זה מפשט את הקוד שלך.

למה זה טוב יותר מ-React

אם אתם מכירים את React, המושגים דומים אך הביצוע שונה.

  • Automatic Tracking: ב-React, עליכם לציין תלויות (dependencies) במערך. ב-Angular, המערכת עוקבת באופן אוטומטי אחרי ה-signals שבהם אתם משתמשים. אי אפשר לשכוח תלות.
  • Precision Updates: React מרנדרת לעיתים קרובות רכיבים שלמים מחדש. Angular signals מעדכנים רק את צמתי ה-DOM הספציפיים שתלויים בערך.
  • No Stale Closures: Signals תמיד מספקים את הערך הנוכחי כאשר קוראים להם.

מקור: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn